CSS学习笔记第21天--设计圆角栏目

网站建设 · 2020-11-09
3.2.6 设计圆角栏目fuzIT米工网
网页设计的第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">
* {/*定义页面中所有标签的统一样式*/
    margin0;
    padding0;
    font-size12px;
    text-aligncenter;
}
body { background#d3d3d3;         /*页面背景色*/ }
.container {
    width844px;
    margin0 auto;              /*居中显示*/
}
.bgimg {
    width850px;
    border2px #fff solid;     /*给header部分图片定义2px宽的边框*/
}
.lanmu {
    width412px;
    floatleft;
}
.yuanjiao {
    border1px solid gray;
    border-top-left-radius10px;
    border-top-right-radius10px;
}
.content1 {
    height250px;
    background#fff;
    margin-right2px;
    background:url(images/bg1.gifrepeat-x;
}
.content2 {
    height250px;
    background#fff;
    background:url(images/bg2.gifrepeat-x;    
}
.content3 {
    height250px;
    background#fff;
    margin-right2px;
    background:url(images/bg3.gifrepeat-x;
}
.content4 {
    height250px;
    background#fff;
    background:url(images/bg4.gifrepeat-x;    
}
.headline img {
    width422px;
    height33px;
}
h3 {
    padding10px 30px 20px;
    font-size16px;
    color#000066;
    text-alignleft;
}
ul { padding-left40px; }
li {
    text-alignleft;
    list-styledisc;
    line-height1.8em;
}
.more {
    text-alignright;
    padding-right20px;
}
</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>