如何用html制作标题栏,第一天学习html前端，制作标题栏

1.html代码

2.css代码

margin:0;

padding:0;

}

body{

width: 100%;

min-width: 1200px;

font-family: "微软雅黑";

}

.header-list{

list-style: none; /*去掉列表前面的标记*/

width: 100%;

overflow: hidden;

}

.header-list li{

float: left;

line-height: 62px;

margin:0 50px;

}

.header-list li:hover{

background: #fff;

}

.header-list li a:hover{

color: #000;

}

.header-list li a{

text-decoration: none; /*清楚超链接的下划线*/

color: #fff;

padding: 0 10px;

display:block; /*使整体变成可点击区域使a和li成为一个整体*/

}

header{

width: 100%;

height: 62px;

background: #333;

min-width: 1200px;

font-size: 14px;

}

.w1200{

width: 1200px;

height: 100%;

padding:0 100px;

margin:0 auto;

box-sizing:border-box;

position: relative;

}

实现效果：

鼠标经过时：

学习的要点

1.理解盒子模型

margin是外边距

padding是内边距

多想想为什么要这样写？

.w1200{

width: 1200px;

height: 100%;

padding:0 100px;

margin:0 auto;

box-sizing:border-box;

position: relative;

}

使w1200的div标签的左右内边距都为100px，margin左右为自适应边距

box--sizing布局 https://www.jianshu.com/p/e2eb0d8c9de6

理解为什么使用box-sizing更好。

2.理解dispaly

display:block; /*使整体变成可点击区域使a和li成为一个整体*/

如何用html制作标题栏,第一天学习html前端，制作标题栏相关推荐

html制作网站边框,HTML学习笔记☆边框制作
HTML学习笔记☆边框制作代码: 填入内容填入内容填入内容填入内容填入内容填入内容填入内容填入内容填入内容以上代码确切地说是表格代码,把括号内文字改成数字或去掉,变成以下代码形式: ...
用html制作个人站点,【制作个人网站】如何在网上制作自己的网页?如何用html5制作个人主页?制作个人网页设计思路是怎样的?...
[制作个人网站]如何在网上制作自己的网页?如何用html5制作个人主页?制作个人网页设计思路是怎样的?下面就和小编一起来看看吧! 如何在网上制作自己的网页? 网站设计的八个步骤现在看到的工具越来越多, ...
Blender+Substance Painter全流程制作真实的机器人学习教程
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:44节课(10h 52m) |大小解压后:9.9 G ...
Python制作当年第一款手机游戏-贪吃蛇游戏（练习）
前言: 文章利用Python pygame做一个贪吃蛇的小游戏而且讲清楚每一段代码是用来干嘛的. 据说是贪吃蛇游戏是1976年,Gremlin公司推出的经典街机游戏,那我们今天用Python制作的这个 ...
实战 | 深度学习轻松学：如何用可视化界面来部署深度学习模型转载 2017年12月27日 00:00:00 109 翻译 | AI科技大本营参与 | 王赫上个月，我有幸结识了 DeepCogn
实战 | 深度学习轻松学:如何用可视化界面来部署深度学习模型转载 2017年12月27日 00:00:00 标签: 109 编辑删除翻译 | AI科技大本营参与 | 王赫上个月,我有幸结识了 ...
# 20155337 2017-2018-1 《信息安全系统设计基础》第一周学习总结
20155337 2017-2018-1 <信息安全系统设计基础>第一周学习总结教材学习内容总结 1.1信息就是位+上下文 hello.c程序是以字节序列的方式储存在文件中的.每个字节都 ...
如何用U盘之家U盘启动盘制作工具实现U盘装系统
若你有一个U盘,本文就带你实现如何来U盘装系统,完全丢掉你的光驱,虽然这个工具比较老了,但教程一样的适用于现在的电脑. 需要的环境: 本文制作出来的引导方式为USB-HDD或USB-ZIP,无需量产, ...
2018-2019-1 20165221 《信息安全系统设计基础》第一周学习总结
2018-2019-1 20165221 <信息安全系统设计基础>第一周学习总结教材学习总结有关vim 打开方式:vim [文件名] 按i会进入insert模式,可以对代码进行编辑按 ...
亚马逊云科技-游戏孵化营第一课学习心得
亚马逊云科技-游戏孵化营第一课学习心得介绍开营宣讲云端游戏的亚马逊主张亚马逊云科技的优势亚马逊云科技游戏的具体服务构建一.探索云上游戏开发新思路行业趋势云计算助力游戏开发和团队协作亚 ...

如何用html制作标题栏,第一天学习html前端，制作标题栏

如何用html制作标题栏,第一天学习html前端，制作标题栏相关推荐

最新文章

热门文章