标题:html、css实现简单的广告
一、思路
- 确定一个总的格局,写好如下代码后,再写css
<div class="outer">
<div class="title">
<a href="#">我的主页</a>
<h3>开学时间 </h3>
</div>
<div class="content">
<h3><a href="#">数据结构+html+css</a></h3>
<ul>
<li>
<a href="#">开学时间:<span class="red">2020-06-06</span></a>
<a class="right" href="#"><span class="red">预约报名</span></a>
</li>
<li>
<a href="#">开学时间:<span class="red">2020-06-06</span></a>
<a class="right" href="#"><span class="red">不开学</span></a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">开学</a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">开学</a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">开学</a>
</li>
</ul>
<h3><a href="#">javascript+jquery+ajax</a></h3>
<ul>
<li>
<a href="#">开学时间:<span class="red">2020-06-06</span></a>
<a class="right" href="#"><span class="red">预约报名</span></a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">不开学</a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">开学</a>
</li>
<li>
<a href="#">开学时间:2020-06-067</a>
<a class="right" href="#">开学</a>
</li>
</ul>
<h3><a href="#">bootStrap+materialize</a></h3>
<ul class="no-border">
<li>
<a href="#">开学时间:<span class="red">2020-06-06</span></a>
<a class="right" href="#"><span class="red">预约报名</span></a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">不开学</a>
</li>
</li>
</ul>
</div>
</div>
二、注意:
*font:12px/1 宋体; /* 设置字体大小,行距,宋体-->黑色 font而不是font-size */
*width:100%;/* 若未设置,则自己设置padding时,不能auto的去调整,来适应outer */
*/*a为内联元素 不能设置垂直外间距*/ /*margin-top:5px; */
`margin-top:14px;/ 为什么不行呢? 可以了,width:100%*/
`
完整代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>
一个小广告终极版
</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style:none;
}
body{
font:12px/1 宋体; /* 设置字体大小,行距,宋体-->黑色 font而不是font-size */
}
.outer{
width:300px;
/* height:473px;
background-color:orange; */
/*设置广告的位置,居中,离上面50px*/
margin:25px auto;/* 50px */
}
.title{
/*设置宽度*/
width:100%;
/*设置高度*/
height:36px;
/*设置上边距*/
border-top:2px green solid;
/*设置背景*/
background-color:rgb(243,245,242);
/*设置一个内边距*/
padding:5px 5px;
/*设置行距*/
line-height:36px;
}
.title a{
float:right;
color:red;
}
.content{
width:100%;/* 若未设置,则自己设置padding时,不能auto的去调整,来适应outer */
background-color:white;
padding:0 5px;
border:1px rgb(223,224,220) solid;
}
.content a{
/*为超链接设置颜色*/
color:black;
/*去掉下划线*/
text-decoration:none;
/*a为内联元素 不能设置垂直外间距*/
/*margin-top:5px; */
}
.content li{
margin-bottom:15px;
}
.content h3{
margin-top:14px;/* 为什么不行呢? 可以了,width:100%*/
margin-bottom:16px;
}
/*设置特殊的字体颜色*/
.content .red{
color:red;
font-weight:bold;
}
/*超链接设置向右移 可以到上一行,因为上一行是内联元素*/
.content .right{
float:right;
}
.content ul{
list-style:none;/* 细心 */
border-bottom:2px rgb(228,229,227) dashed;
}
.content .no-border{
border:none;
}
.content a:hover{
color:purple;
text-decoration:underline;
}
</style>
</head>
<body>
<div class="outer">
<div class="title">
<a href="#">我的主页</a>
<h3>开学时间 </h3>
</div>
<div class="content">
<h3><a href="#">数据结构+html+css</a></h3>
<ul>
<li>
<a href="#">开学时间:<span class="red">2020-06-06</span></a>
<a class="right" href="#"><span class="red">预约报名</span></a>
</li>
<li>
<a href="#">开学时间:<span class="red">2020-06-06</span></a>
<a class="right" href="#"><span class="red">不开学</span></a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">开学</a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">开学</a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">开学</a>
</li>
</ul>
<h3><a href="#">javascript+jquery+ajax</a></h3>
<ul>
<li>
<a href="#">开学时间:<span class="red">2020-06-06</span></a>
<a class="right" href="#"><span class="red">预约报名</span></a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">不开学</a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">开学</a>
</li>
<li>
<a href="#">开学时间:2020-06-067</a>
<a class="right" href="#">开学</a>
</li>
</ul>
<h3><a href="#">bootStrap+materialize</a></h3>
<ul class="no-border">
<li>
<a href="#">开学时间:<span class="red">2020-06-06</span></a>
<a class="right" href="#"><span class="red">预约报名</span></a>
</li>
<li>
<a href="#">开学时间:2020-06-06</a>
<a class="right" href="#">不开学</a>
</li>
</li>
</ul>
</div>
</div>
<img src="magazine-unlock-hi1057703.jpg" width="300" alt="周杰伦"/><br/>
</body>
</html>