《老师执剑丈指html与css的天涯》第三章
简文：很多小伙伴因为不会设置自己的公告或类似公告栏目而头疼，那么我这里有三种设置公告和类似的源码，其中有一个是可以改进的，优化嘛！看个人的啦！！！
代码样式====》
=================》图片《====================
html代码样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>北大青鸟导航</title>
<link rel="stylesheet" href="../北大青鸟导航/css/test.css">
</head>
<body>
<div>
<main>
<h6 class="h6"><img id="img" src="../北大青鸟导航/img/title_icon.gif"
alt="书">
课程导航</h6>
</main>
<section>
<ul id="li">
<li class="li">
<a href="#">ACCP 软件工程师</a>
</li>
<li>
<a href="#">BTEST 软件测试工程师</a>
</li>
<li>
<a href="#">BENET 网络工程师</a>
</li>
<li>
<a href="#">JBNS 网站工程师</a>
</li>
<li>
<a href="#">ACCP 启蒙星</a>
</li>
<li>
<a href="#">ANDROID 软件工程师</a>
</li>
<li>
<a href="#">JAVA 软件工程师</a>
</li>
<li>
<a href="#">.NET 软件工程师</a>
</li>
<li id="l">
<a href="#">网络营销</a>
</li>
</ul>
</section>
</div>
</body>
</html>
css样式：
/*全局声明*/
* {
margin: 0;
padding: 0;
}
/*声明div的框架*/
body>div {
width: 180px;
height: auto;
margin: auto;
background-color: rgb(245, 249, 252);
border: 1px solid rgb(87, 157, 207);
padding: 3px;
}
/*编辑 课程导航 的 样式*/
div>main {
width: 96%;
height: auto;
margin-left: auto;
border-bottom: 1px solid rgb(87, 157, 207);
padding: 4px;
}
/*声明 表格的样式*/
ul>li {
border-bottom: 1px solid rgb(87, 157, 207);
padding: 4px;
background: url(../img/submenu.gif);
background-position: right;
background-repeat: no-repeat;
list-style-type: none;
font: 12px sans-serif;
}
/*改变 默认 格式*/
li>a {
text-decoration: none;
list-style-type: none;
color: #000;
}
/*规定 鼠标上移 样式*/
a:hover {
color: rgb(205, 80, 80);
}
/*优化 图片*/
#img {
vertical-align: middle;
height: 11px;
padding-bottom: 2px;
}
/*去除最后一行的下划线*/
#l {
border-bottom: 1px solid transparent;
}
二；
html代码样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>访东京快报</title>
<link rel="stylesheet" href="../访京东快报/css/test.css">
</head>
<body>
<div>
<h5>
京东快报
</h5>
<ul>
<li>
<a href="#" alt="链接">
<span>[特惠]</span>海飞丝去屑又去油 超清爽
</li>
</a>
<li>
<a href="#" alt="链接">
<span>[公告]</span>京东公益支持鲁甸新动作
</li>
</a>
<li>
<a href="#" alt="链接">
<span>[特惠]</span>4688元抢iPhone 6
</li>
</a>
<li>
<a href="#" alt="链接">
<span>[公告]</span>小米电视携豪礼高调入驻京东
</li>
</a>
</ul>
</div>
</body>
</html>
css样式：
/*全局声明*/
* {
margin: auto;
padding: 0;
}
/*声明div的框架*/
div {
width: 200px;
height: auto;
border: 1px solid rgb(87, 157, 207);
}
/*编辑 首页 的 样式*/
h5 {
color: rgb(102, 102, 102);
border-bottom: 1px dashed rgb(87, 157, 207);
padding: 10px;
font-size: 15px;
font-style: normal;
background: linear-gradient(to bottom, rgb(206, 206, 255), rgb(255, 255, 255))
}
/*声明 表格 的样式*/
ul {
list-style-type: none;
padding: 6px;
}
/*改变 默认 格式*/
a {
color: rgb(102, 102, 125);
font: 12px sans-serif;
text-decoration: none;
font-family: sans-serif;
white-space: nowrap;
}
/*声明 表格内部 的样式*/
li, span {
list-style-type: none;
font-weight: bold;
}
/*规定 鼠标上移 样式*/
li:hover {
background-color: rgb(78, 201, 88);
}
三；
html样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../访聚美优热点/css/test.css">
<title>访聚美优热点</title>
</head>
<body>
<div>
<h4>
大家都喜欢买的美容品
</h4>
<ul>
<li>
<a href=""><span>1</span> 雅诗兰黛即时修护眼部精华霜15ml</a>
</li>
<li>
<a href=""><span>2</span> 伊丽莎白雅顿显效复合活肤霜 75ml</a>
</li>
<li>
<a href=""><span>3</span> OLAY玉兰油多效修护霜 50g</a>
</li>
<li>
<a href=""><span>4</span> 巨型一号丝瓜水320ML</a>
</li>
<li>
<a href=""><span>5</span> 倩碧保湿洁肤水2号 200ml</a>
</li>
<li>
<a href=""><span>6</span> 比度克细肤淡印霜 30g</a>
</li>
<li>
<a href=""><span>7</span> 兰芝 (LANEIGE)夜间修护锁水面膜 80ml</a>
</li>
<li>
<a href=""><span>8</span> SK-II护肤精华露 215ml</a>
</li>
<li>
<a href=""><span>9</span> 欧莱雅青春密码活颜精华肌底液</a>
</li>
</ul>
</div>
</body>
</html>
css样式：
/*全局声明*/
* {
margin: auto;
padding: 0;
/* background-color: rgb(183, 169, 158); */
}
/*声明主题背景*/
body {
background-color: rgb(183, 169, 158);
}
/*声明div的框架*/
div {
margin: auto;
width: 358px;
height: auto;
background-color: rgb(255, 255, 255);
}
/*声明首页样式*/
h4 {
padding: 10px;
color: rgb(255, 255, 255);
background-color: rgb(233, 24, 90);
}
/*声明链接默认去除*/
a {
color: rgb(102, 102, 125);
text-decoration: none;
}
/*声明 内部 框架 */
li {
list-style-type: none;
padding: 2px;
border-bottom: 1px dashed rgb(87, 157, 207);
}
/*声明圆形*/
span {
display: inline-block;
/*声明成快元素*/
width: 22px;
border-radius: 50px;
padding: 5px;
/*完成圆形*/
text-align: center;
/*字体居中*/
color: rgb(255, 255, 255);
background-color: rgb(40, 36, 36);
}
/*声明鼠标上移*/
a:hover {
color: rgb(208, 86, 86);
}
/*声明鼠标上移-继承*/
a:hover>span {
background-color: rgb(208, 86, 86);
}
喜欢的小伙伴可以三连哦！！！mua~
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
