静态网页代码(html+css)
html代码:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="css/整体网页案例.css" /></head><body><div class="header"><!--logo--><div class="logo"><img src="img/logo.jpg" alt="logo" /></div><!--导航栏--><div class="nav"><ul><li><a href="#">首页</a></li><li><a href="#">课程</a></li><li><a href="#">职业规划</a></li></ul></div><!--搜索--><div class="search"><input type="text" value="输入关键词"/><button></button></div><!--用户--><div class="user"><img src="img/用户.jpg" alt="user" /><span>qwertyuiop</span></div></div><div class="banner"><!--链接--><div class="w"><div class="subnav"><ul><li><a href="#">链接1<span>></span></a></li><li><a href="#">链接2<span>></span></a></li><li><a href="#">链接3<span>></span></a></li><li><a href="#">链接4<span>></span></a></li><li><a href="#">链接4<span>></span></a></li><li><a href="#">链接5<span>></span></a></li><li><a href="#">链接6<span>></span></a></li><li><a href="#">链接8<span>></span></a></li><li><a href="#">链接9<span>></span></a></li></ul></div><!--课程表--><div class="course"><h2>我的课程表</h2><div class="bd"><ul><li><h4>程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>程序语言设计</h4><p>正在学习-使用对象</p></li><li><h4>程序语言设计</h4><p>正在学习-使用对象</p></li></ul><a href="#" class="more">全部课程</a></div></div></div></div><!--兴趣--><div class="goods"><h3>精品推荐</h3><ul><li><a href="#">jQuery</a></li><li><a href="#">spark</a></li><li><a href="#">MySQL</a></li><li><a href="#">Java</a></li><li><a href="#">JavaScript</a></li></ul><a href="#" class="mod">修改兴趣</a></div><!--产品模块--><div class="box"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li><li><img src="img/产品.jpg" alt="" /><h4>jQuery实战项目演练</h4><div class="info"><span>高级</span> • 1125人在学习</div></li></ul></div></div><!--底部--><div class="footer"><div class="t"><div class="copyleft"><img src="img/logo.jpg" alt="logo" /><p>勤奋是你生命的密码,能译出你一部壮丽的史诗,<br />一个有信念者所开发出的力量,大于个只有兴趣者。</p><a href="#" class="app">下载app</a></div><div class="linksright"><dl><dt>关于网站</dt><dd><a href="#">关于</a></dd><dd><a href="#">管理团队</a></dd><dd><a href="#">工作机会</a></dd><dd><a href="#">客户服务</a></dd><dd><a href="#">帮助</a></dd></dl><dl><dt>新手指南</dt><dd><a href="#">如何注册</a></dd><dd><a href="#">如何选课</a></dd><dd><a href="#">如何拿到毕业证</a></dd><dd><a href="#">学分是什么</a></dd><dd><a href="#">考试未通过怎么办</a></dd></dl><dl><dt>合作伙伴</dt><dd><a href="#">合作机构</a></dd><dd><a href="#">合作导师</a></dd></dl></div></div></div></body>
</html>
css代码:
* {margin: 0;padding: 0;
}body {background-color: #f3f5f7;
}li {list-style: none;
}a {text-decoration: none;
}.clearfix:before,.clearfix:after{content: "";display: table;
}
.clearfix:after{clear: both;
}
.clearfix{*zoom: 1;
}.header {width: 1200px;height: 42px;margin: auto;margin: 30px auto;
}.logo {float: left;width: 198px;height: 42px;
}.nav {float: left;margin-left: 60px;
}.nav ul li {float: left;margin: 0 15px;
}.nav ul li a {display: block;height: 42px;padding: 0 10px;line-height: 42px;font-size: 18px;color: black;
}.nav ul li a:hover {border-bottom: 2px solid gold;color: gold;
}.search {float: left;width: 412px;height: 42px;margin-left: 50px;
}.search input {float: left;width: 345px;height: 40px;border: 1px solid gold;border-right: 0;color: gray;font-size: 14px;padding-left: 15px;
}.search button {float: left;width: 50px;height: 42px;border: 0;background: url(../img/搜索.jpg);
}.user {display: block;float: left;line-height: 42px;margin-left: 30px;font-size: 14px;color: gray;
}.user span {display: block;float: right;width: 100px;height: 42px;
}.banner {height: 421px;background-color: cornsilk;
}.banner .w {width: 1200px;height: 421px;margin: auto;background: url(../img/大图.jpg) no-repeat top center;
}.banner .w .subnav {float: left;width: 190px;height: 421px;background-color: gold;
}.subnav ul li {height: 45px;line-height: 45px;padding: 0 20px;
}.subnav ul li a {font-size: 14px;color: white;
}.subnav ul li a span {float: right;
}.subnav ul li a:hover {color: skyblue;
}.course {float: right;width: 230px;height: 300px;background-color: cornsilk;margin-top: 50px;
}.course h2 {height: 48px;background-color: gold;text-align: center;line-height: 48px;font-size: 18px;color: white;
}.bd {padding: 0 20px;
}.bd ul li {padding: 12px 0;border-bottom: 1px solid gainsboro;
}.bd ul li p {color: gray;
}.bd .more {display: block;height: 38px;border: 1px solid gold;margin-top: 5px;text-align: center;line-height: 38px;color: gold;font-size: 16px;font-weight: 700;
}.goods {width: 1200px;height: 60px;margin: auto;margin-top: 10px;box-shadow: 0 4px 3px 3px rgba(0, 0, 0, 0.1);line-height: 60px;
}.goods h3 {float: left;margin-left: 30px;font-size: 16px;
}.goods ul {float: left;margin-left: 30px;
}.goods ul li {float: left;
}.goods ul li a {color: #000000;padding: 0 30px;border-left: 1px solid gainsboro;
}.mod {float: right;margin-right: 30px;font-size: 16px;color: #000000;
}.box{margin-top: 30px;
}.box-hd{height: 45px;width: 1225px;margin: 0 auto;
}.box-hd h3{margin-left: 15px;float: left;font-size: 20px;
}.box-hd a{float: right;font-size: 12px;color: gray;margin-top: 10px;margin-right: 30px;
}.box-bd ul{width: 1225px;margin: auto;
}
.box-bd ul li{float: left;width: 228px;height: 270px;background-color: cornsilk;margin-left: 15px;margin-bottom: 15px;
}.box-bd ul li img{width: 100%;
}.box-bd ul li h4{margin: 0 20px 0 25px;font-size: 18px;font-weight: 400;
}.box-bd .info{padding-top: 20px;margin: 0 20px 0 25px;font-size: 12px;color: gray;
}.box-bd .info span{color: orangered;
}.footer{height: 415px;background-color: cornsilk;
}.footer .t{padding-top: 35px;}.copyleft{float: left;margin-left: 30px;
}.copyleft p{padding-left: 30px;font-size: 12px;color: gray;margin: 20px 0 15px 0;
}.copyleft .app{margin-left: 30px;width: 118px;height: 33px;border: 1px solid gold;text-align: center;line-height: 33px;color: skyblue;font-size: 16px;
}.linksright{float: right;margin-right: 30px;
}.linksright dl{float: left;margin-left: 100px;
}.linksright dl dt {font-size: 16px; margin-bottom: 5px;
}.linksright dl dd a{font-size: 12px;color: #000000;
}
效果图:
传统网页布局的三种方式:普通流(标准流)、浮动、定位
(1)标准流(普通流 / 文档流)
标准流:标签按照规定好默认方式排列
1.块元素会独占一行,从上往下顺序排列
常用元素: div, hr, p, h1~h6, ul, ol, dl, form, table
2.行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行
常用元素: span, a, i, em等
标准流是最基本的布局方式
浮动(float):
浮动可以改变元素标签默认的排列方式
浮动最典型的应用:可以让多个块元素在一行内排列显示
网页布局第一准则:多个块元素纵向排列找标准流,多个块元素横向排列找浮动
网页布局的第二准则:先设置盒子大小,之后设置盒子的位置
float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘
语法格式:
属性值 | 描述 |
none | 元素不浮动(默认) |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动特性:
1.浮动的元素会脱离标准流
2.浮动的元素会一行内显示并且元素顶部对齐
3.浮动的元素会具有行内块元素的特性
设置了浮动(float)的元素最重要特性
1.脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标)
2.浮动的盒子不再保留原先的位置
浮动练习:
练习1:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.box{width: 1200PX;height: 460px;background-color: deepskyblue;margin: 0 auto;}.left{float: left;width: 230px;height: 460px;background-color: cornsilk;}.right{float: left;width: 970px;height: 460px;background-color: skyblue;}</style></head><body><div class="box"><div class="left">左</div><div class="right">右</div></div></body>
</html>
结果图:
练习2:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}li{list-style: none;}.box{width: 1226px;height: 285px;background-color: skyblue;margin: 0 auto;}.box li{width: 296px;height: 285px;background-color: bisque;float: left;margin-right: 14px;}.box .four{margin-right: 0;}</style></head><body><ul class="box"><li>1</li><li>2</li><li>3</li><li class="four">4</li></ul></body>
</html>
结果图:
练习3:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.box{width: 1226px;height: 615px;background-color: deepskyblue;margin: 0 auto;}.left{float: left;width: 234px;height: 615px;background-color: cornsilk;}.right{float: left;width: 992px;height: 615px;background-color: skyblue;}.right>div{width: 234px;height: 300px;background-color: gainsboro;float: left;margin-left: 14px;margin-bottom: 14px;}</style></head><body><div class="box"><div class="left">左</div><div class="right"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div></div></div></body>
</html>
结果图:
整体网页布局:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>*{margin: 0;padding: 0;}.top{height: 50px;background-color: skyblue;}.banner{width: 980px;height: 150px;background-color: skyblue;margin: 10px auto;}.box{width: 980px;height: 300px;background-color: cornsilk;margin: 0 auto;}li{list-style: none;}.box li{width: 237px;height: 300px;background-color: skyblue;float: left;margin-right: 10px;}.box .four{margin-right: 0;}.foorer{margin-top: 10px;height: 200px;background-color: skyblue;}</style></head><body><div class="top">top</div><div class="banner">banner</div><div class="box"><ul><li>1</li><li>2</li><li>3</li><li class="four">4</li></ul></div><div class="foorer">footer</div></body>
</html>
结果图:
浮动布局注意点:
1.浮动和标准流的父盒子搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
2.一个元素浮动了,理论上其余的兄弟元素也要浮动
一个盒子里面有多个子盒子,如果其中一个盒子浮动了,那么其他兄弟元素也应该浮动,以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。
清除浮动:
语法格式:
选择器{clear:属性值;}
属性值 | 描述 |
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧有浮动元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
清除浮动的方法:
1.额外标签法也称为隔墙法,是w3c推荐的做法
额外标签法会在浮动元素末尾添加一个空的标签。
例:<div style="clear.both"><div>
2.父级添加overflow属性
可以给父级添加overflow属性,将其属性值设置为hidden, auto或scroll
3.父级添加after伪元素
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix{*zoom: 1;}
4.父级添加双伪元素
.clearfix:before, .clearfix:after{content: "";display: table;}.clearfix:after{clear: both;}.clearfix{*zoom: 1;}