静态网页制作（html+css）、css浮动,练习（网页布局），清除浮动
常用元素： div, hr, p, h1~h6, ul, ol, dl, form, table。float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟元素也应该浮动，以防止引起问题。网页布局第一准则：多个块元素纵向排列找标准流，多个块元素横向排列找浮动。先用标准流的父元素排列上下位置，之后内部
·
静态网页代码（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;
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
12
0- 0
已为社区贡献2条内容
所有评论(0)