制作一个静态页面,主要练习HTML基础、CSS基础、DIV+CSS布局、位置定位。
准备实验所需要的图片文件
分析网页的布局,整个页面的拆分。
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;
}
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>
效果图
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>
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;
}
效果
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>
实验效果
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>