静态网页制作(html+css)、css浮动,练习(网页布局),清除浮动

article/2025/10/16 23:10:21

静态网页代码(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>&gt;</span></a></li><li><a href="#">链接2<span>&gt;</span></a></li><li><a href="#">链接3<span>&gt;</span></a></li><li><a href="#">链接4<span>&gt;</span></a></li><li><a href="#">链接4<span>&gt;</span></a></li><li><a href="#">链接5<span>&gt;</span></a></li><li><a href="#">链接6<span>&gt;</span></a></li><li><a href="#">链接8<span>&gt;</span></a></li><li><a href="#">链接9<span>&gt;</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;}

 

 


http://chatgpt.dhexx.cn/article/pYtZfIix.shtml

相关文章

静态网页制作

记录一下制作网页的过程和其中遇到的问题和解决方法 一、网页样式 二、制作过程 轮播图 实现方法更改图片的src&#xff0c;实现把图片命名为p1.png,p2.png <script>var index1;function lunbo(){index;if(index>2){index1;}var imgdocument.getElementById("…

Javaweb实验:静态网页制作

Javaweb实验&#xff1a; 1.静态网页制作 目录 Javaweb实验&#xff1a; 前言 一、实验目的 二、实验原理 三、实验内容 四、实验步骤 五、实验结果 六、实验内容 七、实验步骤 八、实验结果 九、思考 1、frameset和frame标签的作用是什么&#xff1f; 2、个人主…

前端学习——静态网页制作

前端学习——静态网页制作 1学习内容2. 成果展示 1学习内容 综合运用HTML、CSS知识制作静态网页。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>京吃食府</title><link rel"styles…

HTML标签img的alt和title属性

在html5 中&#xff0c;title可以在任意HTML标签中使用&#xff0c;厌憎任意元素&#xff0c;但是不一定有效

HTML的img标签的 alt 属性

如果无法显示图像&#xff0c;浏览器将显示替代文本&#xff0c;就像这样&#xff1a; 此外&#xff0c;当用户把鼠标移到图像上方&#xff0c;最新的浏览器会在一个文本框中显示描述性文本。 alt 属性是一个必需的属性&#xff0c;它规定在图像无法显示时的替代文本。 假设由…

CSS的alt:图片无法显示时候显示alt内容

<img src"/i/eg_tulip.jpg" alt"上海鲜花港 - 郁金香" />如果无法显示图像&#xff0c;浏览器将显示替代文本&#xff0c;就像这样&#xff1a;

HTML里img标签里的alt属性解释

我们在写HTML的时候&#xff0c;总会和图像进行交互&#xff0c;所以我们总会看到<img>标签里的alt属性。 很多的解释是&#xff1a;alt 用来在非图形化浏览器中替代图像 感觉很模棱两可&#xff0c;所以总结如下&#xff1a; 如果无法显示图像&#xff0c;浏览器将显…

用div模拟ALT的提示效果

在网页设计过程中经常会用到标签的alt&#xff0c;title提示效果&#xff0c;但往往满足不了要求。昨天一个同事在设计页面时刚好需要用到这种提示效果&#xff0c;我就帮他用div做了一个。 <html><SCRIPT> var innerhtm <div id"showtip" style&quo…

img标签的alt属性和title属性的区别

img的title和alt有什么区别 1.title&#xff1a;通常当鼠标滑动到元素上的时候显示 2.alt&#xff1a;alt是img标签的特有属性&#xff0c;是图片内容的等价描述&#xff0c;用于图片无法正常加载时显示 <div><img src"https://ss1.bdstatic.com/70cFvXSh_Q1Ynx…

css强制样式

在我们日常写代码中&#xff0c;我们偶尔会遇到一个问题&#xff0c;就是我们的样式上不去&#xff0c;明明写了样式就是看不到效果&#xff0c;这时候我们就会检查我们的代码是否写错&#xff0c;但看来看去就是没问题 此时就有可能是我们的样式权重不够这时我们只需要在我们样…

DIV+CSS实现alt属性效果

< head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" > < title > 鼠标提示 </ title > < script language ="JavaScript" > ... function seashowtip(tips,flag,iwidth)...{va…

html语言中alt,html中alt的用法

html中插入图片时alt是什么属性&#xff1f; alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。 当用户因为某种原因(比如&#xff1a;打开速度慢、src属性存在错误或者用户使用了屏幕阅读器)不能查看图像时&#xff0c;alt属性提供了替代信息。 …

用 Mac 输入罗马数字

Mac 上输入罗马数字&#xff0c;很简单的&#xff0c;Mac的符号是真的全。 如果只是用一次&#xff0c;那么直接在「表情与符号」中找到就行了。 如果要多次用&#xff0c;就建一个文本替换就行了。 找到罗马数字 打开表情与符号 打开自定列表 勾选「数字 - 全部」&#xff0…

oracle 罗马数字处理,阿拉伯数字转罗马数字(Roman Numeral Converter)

如上图所示&#xff0c;罗马数字由7个基本字符组成[I,V,X,L,C,D,M],阿拉伯数字num转换时需将数字经过求余运算&#xff0c;对千位以上、百位、十位和个位分别进行处理。 一、千位以上 num/1000的结果为n&#xff0c;结果字符串result需重复n次字符‘M’&#xff1b;可抽象如下函…

罗马数字转阿拉伯数字

一、学习要点&#xff1a; 1.运用递归的思想&#xff0c;找出罗马字符串中最大的元素&#xff0c;对左边的处理是减去&#xff0c;对右边的处理是加上&#xff1b;递归头是字符串只剩下一个元素时&#xff0c;或者右边的下标小于左边的下标&#xff1b; 二、代码&#xff1a; …

Latex输出大小写罗马数字

文章目录 1 大写罗马数字2 小写罗马数字3 示例 1 大写罗马数字 相应的数字 1 1 1表示 \uppercase\expandafter{\romannumeral1} 2 小写罗马数字 \romannumeral1 3 示例 \begin{table}[!htb]\caption{Test.}\renewcommand\tabcolsep{0.005cm}\centering\setlength{\abovecaptio…

LaTex使用技巧19:罗马数字输入(大写和小写)

在写论文的时候要用到罗马数字&#xff0c;参考下面的博客发现罗马数字都是斜体的 Latex罗马数字&#xff08;一&#xff09; 使用的是文章的第一种方法&#xff1a; \uppercase\expandafter{\romannumeral2} 后面可以输入不同的数字&#xff0c;例如输入2&#xff0c;得到大…

latex 罗马数字

需求&#xff1a;latex中加入罗马数字。 导言区加包 \usepackage{amssymb} \makeatletter \newcommand{\rmnum}[1]{\romannumeral #1} \newcommand{\Rmnum}[1]{\expandafter\slowromancap\romannumeral #1} \makeatother其中&#xff0c;引用时Rmnum{ }表示大写, /rmnum{ }表…

计算机页码格式罗马数字,word 页码 罗马数字怎么从1开始

word 页码 罗马数字怎么从1开始以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! word 页码 罗马数字怎么从1开始 第一步:在前几页结束的地方点“插入”——>“分隔符” 作用是区别前几页和正文的内容; 第二步…