Web前端学习知识点总结（五）qq导航条案例，使用min-width解决留白

it2023-10-12 75

系列文章目录

Web前端学习知识点总结（一）HTML基本标签. Web前端学习知识点总结（二）之Form和Css选择器. Web前端学习知识点总结（三）Css字体、文本样式以及盒子模型. Web前端学习知识点总结（四）之display 和 float. Web前端学习知识点总结（五）qq导航条案例，使用min-width解决留白. Web前端学习知识点总结（六）定位position. Web前端学习知识点总结（七）Css3动画animation. Web前端学习知识点总结（八）JavaScript的常用基础. Web前端学习知识点总结（九）JavaScript的BOM和DOM基础. Web前端学习知识点总结（十）jQuery基础获取文本和选择器. Web前端学习知识点总结（十一）jQuery进阶动画和节点操作. Web前端学习知识点总结（十二）jQuery进阶表单验证和简单正则表达式. Web前端学习知识点总结（十三）学生管理系统案例.

文章目录

系列文章目录前言QQ导航条案例1.外部CSS引入2.html界面

前言

关于HTML和CSS的学习，需要经过不断的练习，不断的模仿以及做好的成品，积极地总结属于自己的经验。

QQ导航条案例

用一个qq导航条的案例来解释。

1.外部CSS引入

在项目的css文件中使用外部css，创建一个.CSS文件。在css的文档第一句中加入@charset “utf-8”;

最关键的解决留白问题：当窗口过小的时候，只需要设置出来页面的最小宽度min-width=控件的width即可。

@charset "utf-8"; *{ margin: 0px; padding: 0px; } body header{ /*复制颜色要加#*/ background-color:#666666; height: 90px; /*最大的背景层,设置为最小的min-width*/ min-width: 1100px; } #top{ /*规定宽度,并设定auto的margin进行页面的居中操作*/ width: 1100px; height: 90px; margin: 0 auto; /*border: 1px solid red;*/ } #top img{ height: 100%; float: left; } #top nav{ margin: 0 20px; /*border: 1px solid red;*/ float: left; height: 90px; } #top nav ul li{ float: left; list-style: none; padding: 0 15px; line-height: 90px; } #top nav ul li a{ text-decoration: none; color: white; } #top nav ul li a:hover{ text-decoration: underline; color: blue; } #online :first-child{ line-height: 90px; /*不需要float float会变成一个行内元素*/ /*float: left;*/ /*去掉下划线*/ text-decoration: none; /*边界颜色*/ border: 1px solid #FAD65C; /*撑起来容器,进行扩充*/ padding: 7px 25px; /*字体大小*/ font-size:14px; /*圆角效果*/ border-radius:30px ; color:#FAD65C ; } #online :nth-child(2){ line-height: 90px; /*不需要float*/ /*float: left;*/ text-decoration: none; border: 1px solid #FAD65C; /*用padding去撑开*/ padding: 7px 25px; font-size:14px; border-radius:30px ; color:#956709 ; font-weight: bold; background-color: #FAD65C; } #online a:hover{ line-height: 90px; text-decoration: underline; } /*a的悬浮效果*/ #online a:nth-of-type(1):hover{ color:#956709 ; background-color: #FAD65C; } .clear:after{ content: ""; clear: both; display: inline-block; }

2.html界面

使用link href=“css/qq_header.css” rel=“stylesheet” 来外部引入css的样式。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="css/qq_header.css" rel="stylesheet" /> </head> <body> <header> <div id="top" class="clear"> <img src="img/微信图片_20201012202508.png"/>  <nav> <ul> <li><a href="#">功能特权</a></li> <li><a href="#">游戏特权</a></li> <li><a href="#">生活特权</a></li> <li><a href="#">会员活动</a></li> <li><a href="#">成长体系</a></li> <li><a href="#">年费专区</a></li> <li><a href="#">超级会员</a></li> </ul> </nav> <div id="online"> <a href="#">登录</a> <a href="#">开通超级会员</a> </div> </div> </header> </body> </html>

最终效果

最新回复(0)

Web前端 学习知识点总结（五）qq导航条案例，使用min-width解决留白