书山有路勤为径,学海无涯苦作舟。 知识改变命运,行动创造未来。

HTML+CSS

HTML & CSS完成页面

实现目标

制作一个静态页面,主要练习HTML基础、CSS基础、DIV+CSS布局、位置定位。

images

实验过程

1. 切图

准备实验所需要的图片文件

2. 网页布局

分析网页的布局,整个页面的拆分。

images

3. 重置浏览器样式

body去除多余的空行,a 清除超链接的格式 , li 清除列表项的格式。

左右浮动与清除浮动的使用。

body {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.clear-float{
	clear: both;
}

3. 导航栏实现

左部菜单

Css代码

/*整个导航栏*/
.header {
	height: 52px ;
	border-bottom: 1px solid blue;
	min-width: 960px;
}

/*导航栏左部部分*/
.header-left {
	width: 69%;
	height: 50px;
	border: 1px solid green;
	position: relative;
}


/*导航栏左部部分-logo*/
.header-logo {
	width: 80px;
	margin-top: 10px;
	margin-left: 10px;
	position: absolute;
	left: 200px;
}

/*导航栏左部部分-logo-img*/
.header-logo img {
	width: 64px;
	height: 30px;
}


/*菜单*/
.tab-menu{
	width: 300px;
	position: absolute;
	left: 270px;
	top: 0px;
}

/*菜单项*/
.tab-menu li{
	height: 50px;
	display: inline-block;
}

/*菜单项-a标签*/
.tab-menu li a{
	width: 30px;
	color: #8590a6;
	font-weight: 20px;
	font-size: 15px;
	margin-left: 15px;
	margin-right: 15px;
	vertical-align: top;
}


/*能够选中tab-menu下所有li中的第一个li*/
.tab-menu li:nth-of-type(1) a{
	color: #8590A6;
}
.tab-menu li:nth-of-type(1) a:hover{
	color: black;
}



/*搜索框search*/
.search {
	width: 326px;
	height: 34px;
	position: absolute;
	left: 550px;
	top: 8px
}

.search input{
	width: 300px;
	height: 30px;
	border: 1px solid grey;
}


.search button{
	height: 33px;
	background-color: grey;
	
	border-style: none;
	outline: none;
	position: absolute;
	left:265px;
}

.search button i a {
	color: white;
}

/*提问*/
.question button {
	width: 80px;
	height: 33px;
	background-color: #0084ff;
	border-style: none;
	outline: none;
	position: absolute;
	left: 877px;
	top: 8px;
}

.question button a {
	color: white;
	font-size: 15px;
}
<!--头部 导航菜单实现-->
		<div class="header clear-float">
			
			<div class="header-left float-left">
				
				<div class="header-logo">
					<img src="img/logo.png" >
				</div>
				
				
				<ul class="tab-menu ">
					<li><a href="" >首页</a></li>
					<li><a href="">发现</a></li>
					<li><a href="">等你来答</a></li>
				</ul>
				
				<div class="search">
					<input type="text" placeholder="  请输入..." name="" id="" value="" />
					 <button><i><a href="">搜索</a></i></button>
				</div>
				
				<div class="question">
					<button><a href="">提问</a></button>
				</div>
				
			</div>

效果图

images

右部菜单

css代码

.header-right {
	width: 30%;
	height: 50px;
	position: relative;
}


/*菜单*/
.mes-menu{
	width: 300px;
	position: absolute;
	right: 164px;
	top: -11px;
}

.mes-menu li{
    display: inline-block;
	width: 30px;
	height:50px;
	padding-left: 40px;
}

.mes-menu li img{
	width: 50px;
	height: 45px;
	float: left;
}

html

<div class="header-right float-right">
				
				<div class="tongzhi01">
					<ul class="mes-menu float-left">
						<li><img src="img/tongzhi01.png" ></li>
						<li><img src="img/tongzhi02.png" ></li>
						<li><img src="img/users.png" ></li>
					</ul>	
				</div>
			</div>

images

4. 轮播图实现

html代码

<!--轮播图-->
		<div class="picture">
			<img src="img/10.url.png" >
		</div>

css代码

.picture {
	margin-top: 10px;
	background-color: #0a5394;
}

.picture img {
	margin-left: 200px;
	margin-right: 200px;
	width: 1000px;
}

效果

images

5. 中部菜单实现

css代码

#title {
	font-size: 40px;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	color: black;
	font-weight: 100px;
}


/*主题内容*/
.allitems {
	width: 100%;
	height: 200px;
}

.main {
	width: 220px;
	height: 200px;
	border: 1px solid gray;
	float: left;
	margin-left: 15px;
}

.items a {
	width: 40px;
	height: 50px;
	text-decoration: none;
	color: #FF0000;
	font-size: 20px;
	margin: 10px;
}

.items img {
	width: 220px;
	height: 124px;
}

.items-text {
	margin: 10px;
}
.items-text a {
	width: 100px;
	height: 80px;
	text-decoration: none;
	color: black;
	font-size: 15px;
	vertical-align: top;
}

html代码

<div id="title">
		   全部课程
		</div>
		
		<div class="allitems clear-float">
		   <div class="main">
				<div class="items">
					<img src="img/course01.png" >	
				</div>
				<div class="items-text">
					<a href="">Python自动化测试教程</a>
				</div>
				<div class="items">
					<a href="">¥19.9</a>
				</div>
			</div>
			<div class="main">
				<div class="items">
					<img src="img/course01.png" >	
				</div>
				<div class="items-text">
					<a href="">Python自动化测试教程</a>
				</div>
				<div class="items">
					<a href="">¥19.9</a>
				</div>
			</div>
			
			<div class="main">
				<div class="items">
					<img src="img/course01.png" >	
				</div>
				<div class="items-text">
					<a href="">Python自动化测试教程</a>
				</div>
				<div class="items">
					<a href="">¥19.9</a>
				</div>
			</div>
			<div class="main">
				<div class="items">
					<img src="img/course01.png" >	
				</div>
				<div class="items-text">
					<a href="">Python自动化测试教程</a>
				</div>
				<div class="items">
					<a href="">¥19.9</a>
				</div>
			</div>			
		
			<div class="main">
				<div class="items">
					<img src="img/course01.png" >	
				</div>
				<div class="items-text">
					<a href="">Python自动化测试教程</a>
				</div>
				<div class="items">
					<a href="">¥19.9</a>
				</div>
			</div>
			<div class="main">
				<div class="items">
					<img src="img/course01.png" >	
				</div>
				<div class="items-text">
					<a href="">Python自动化测试教程</a>
				</div>
				<div class="items">
					<a href="">¥19.9</a>
				</div>
			</div>	
		</div>

实验效果

images

6.底部页脚实现

css

.footer {
	width: 100%;
	height: 90px;
    margin-top: 50px;
	background-color: #0a5394;
}

.footer p {
	font-size: 10px;
	height: 20px;
	line-height: 90px;
	text-align: center;
	color: white;
	margin-bottom: 11px;
}

html

<div class="footer">
			 <p>Copyright © 2020 xxxxxx. All Rights Reserved.</p>
			 
			 <p>xxxxx有限公司 版权所有 | 服务协议 | 站点地图 | 侵权投诉 | 问题反馈 | 帮助</p>
		</div>

iamges