HTML-学成在线
学成在线案例，头部导航栏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学成在线首页</title> <link rel="stylesheet" href="study.css"> </head> <body> <!-- 1.首先确定版心，整个版面的核心 2.分析页面中的行模块，以及每个行模块中的列模块，页面布局第一准则 3.一行中的列模块经常浮动布局，先确定每个列大小之后在确定列的位置，页面布局第二准则 4.制作HTML结构，遵循现有结构后又样式的原则，结构永远是最重要的 5.县里清楚布局结构，然后再去写代码 --> <!--头部区域--> <div class="header w"> <div class="logo"> 盒子 </div> <!--导航栏 实际开发中导航栏的链接制作一般情况下是用li+a做的 1.li+a结构更加清晰，有条理的列表内容 2.如果只使用a搜索引擎很容易辩别为有堆砌关键字的嫌疑（ 故意堆砌关键字容易被搜索引擎有降权的风险 ）从而影响网站排名 --> <div class="nav"> <ul> <li><a href="">首页</a></li> <li><a href="">课程</a></li> <li><a href="">职业规划</a></li> </ul> </div> <!--search外面是一个大盒子里面是一个文本框和一个按钮--> <div class="search"> <input type="text" value="输入关键词"> <button></button> </div> <!--用户头像--> <div class="user"> <img src="kjnij" alt=""><!--放一张图片--> qq-lilei </div> </div> </body> </html>
css文件
* {
margin: 0;
padding: 0;
}
/*书写方式*/
/**
布局定位：display position float等等
自身属性：width padidng background等等
文本属性：color text
其他属性：border-radious等等
**/
/*版心,这一块是我们中间盒子的样式
居中且宽度为1200px写在这里的原因是
如果有盒子需要直接调用即可
*/
.w {
width: 1200px;
margin: auto;
}
body {
background-color: #f3f5f7;
}
/*头部*/
.header {
height: 42px;
/* background-color: palegoldenrod;*/
margin: 30px auto;/*此地方会层叠上面的w*/
}
.logo {
width: 198px;
height: 42px;
/* background-color: powderblue;*/
float: left;
}
li {
list-style: none;
}
.nav {
float: left;
margin-left: 60px;
}
.nav ul li {
float: left;
margin: 0 15px;
}
.nav ul li a {
display: block;/*转化w为块级元素来由宽高*/
height: 42px;/*为啥这里不给宽度是因为给了宽度就固定了从案例来看
我们这里的字数不同所以选择给padding左右值来撑开盒子
*/
padding: 0 10px;
line-height: 42px;
font-size: 18px;
color: black;
text-decoration: none;
}
.nav ul li a:hover{
border-bottom: 2px solid #00a4ff;
color: #00a4ff;
}
.search {
width: 412px;
height: 42px;
/*background-color: burlywood;*/
float: left;
margin-left: 50px;
}
.search input {
float: left;
width: 345px;
height: 40px;
border: 1px solid #00a4ff;
border-right: none;
color: #bfbfbf;
font-size: 14px;
padding-left: 15px;
}
.search button {
float: left;
width: 50px;
height: 42px;
background-color:#00a4ff ;
/*按钮有默认的边框所以我们要去掉*/
/*并且前面的文本输入框和这个按钮一样同属于行内块元素
这里注意两个行内块元素在起事他们之间默认有一个距离所以
当我们直接这样运行的时候按钮会掉下来
解决方案：
给这两个盒子加浮动，浮动的两个盒子之间没有距离
*/
border-style: none;
/* background-image: url();这里我没有图片就这样写路径就行*/
}
.user {
float: right;
line-height: 42px;
margin-right: 30px;
font-size: 14px;
color: #666;
}
代码中的注释需要着重去看，其中有布局构思以及各个部分使用的限制
