CSS学习笔记第21天--设计圆角栏目
· 2020-11-09
3.2.6 设计圆角栏目
网页设计的第1步构建页面结构。
网页设计的第1步构建页面结构。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>透明圆角化图片</title>
<style type="text/css">
* {/*定义页面中所有标签的统一样式*/
margin: 0;
padding: 0;
font-size: 12px;
text-align: center;
}
body { background: #d3d3d3; /*页面背景色*/ }
.container {
width: 844px;
margin: 0 auto; /*居中显示*/
}
.bgimg {
width: 850px;
border: 2px #fff solid; /*给header部分图片定义2px宽的边框*/
}
.lanmu {
width: 412px;
float: left;
}
.yuanjiao {
border: 1px solid gray;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.content1 {
height: 250px;
background: #fff;
margin-right: 2px;
background:url(images/bg1.gif) repeat-x;
}
.content2 {
height: 250px;
background: #fff;
background:url(images/bg2.gif) repeat-x;
}
.content3 {
height: 250px;
background: #fff;
margin-right: 2px;
background:url(images/bg3.gif) repeat-x;
}
.content4 {
height: 250px;
background: #fff;
background:url(images/bg4.gif) repeat-x;
}
.headline img {
width: 422px;
height: 33px;
}
h3 {
padding: 10px 30px 20px;
font-size: 16px;
color: #000066;
text-align: left;
}
ul { padding-left: 40px; }
li {
text-align: left;
list-style: disc;
line-height: 1.8em;
}
.more {
text-align: right;
padding-right: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class=”header”> <img class="bgimg" src="images/bg.jpg"> </div>
<div class="main">
<div class="lanmu yuanjiao">
<div class="content1 yuanjiao">
<h3>散文随笔</h3>
<ul class="topic">
<li>[生活感悟] 晴，----简单生活，感受美好，期待明天</li>
<li>[生活感悟] 多年后，我们或许会嫁给这样的他 </li>
<li>[生活感悟] 从今以后，试着做个这样的人</li>
<li>[生活感悟] 人最大的不幸，就是不知道自己是幸福的</li>
<li>[生活感悟] 人生至境是不争 恬静出尘心自宁 </li>
<li>[生活感悟] 没有如意的生活，只有看开的人生</li>
</ul>
<p class="more"><a href="#">更多内容</a></p>
</div>
</div>
<div class="lanmu yuanjiao">
<div class="content2 yuanjiao">
<h3>心情驿站</h3>
<ul class="topic">
<li>真的只是有时候，莫名的心情不好，给自己找一个出口</li>
<li>什么是随和？随和是一种素质和修养，是淡泊名利时的超然</li>
<li>快乐是自己的事情,只要愿意,你可以随时调换手中的遥控器</li>
<li>如果我是一个从前的哲人，来到今天的世界，我会怀念什么</li>
<li>男孩的父亲对即将恋爱的儿子说的话 </li>
<li>总有一种平凡，叫人泪流满面——白芳礼 </li>
<li>岁月需要回忆,朋友需要相聚,缘分需要偶遇,生命需要延续 </li>
</ul>
<p class="more"><a href="#">更多内容</a></p>
</div>
</div>
<div class="lanmu yuanjiao">
<div class="content3 yuanjiao">
<h3>名家名作</h3>
<ul class="topic">
<li>[励志格言] 相信自己一定能行</li>
<li>一切困难都是为了让我们更强大</li>
<li>巴菲特:人一生中最重要的是专注</li>
<li>靠山山会倒，靠人人会跑，只有自己可靠。</li>
<li>与其用泪水悔恨今天，不如用汗水拼搏今天</li>
<li>今日的你是你过去习惯的结果,今日的习惯将是你明日的命运</li>
<li>与其用泪水悔恨今天，不如用汗水拼搏今天</li>
</ul>
<p class="more"><a href="#">更多内容</a></p>
</div>
</div>
<div class="lanmu yuanjiao">
<div class="content4 yuanjiao">
<h3>校园文章</h3>
<ul class="topic">
<li>献给学生生涯里的每一个同桌们 </li>
<li>[校园爱情文章] 一个失恋的女生写的真实的帖子</li>
<li>情人节，要向暗恋了多年的人表白</li>
<li>人与人之间的差距，是从大学开始拉大的 </li>
<li>叶子的离去,是风的追求,还是树的不挽留</li>
<li>[校园爱情文章] 美术生走在淡淡金色的黄昏</li>
<li>[校园爱情文章] 没有了初恋，你还有我</li>
</ul>
<p class="more"><a href="#">更多内容</a></p>
</div>
</div>
</div>
</body>
</html>