CSS+DIV 实现个人网页简单样板

编程语言 2018-11-06 16:05:05 阅读次数: 0

实现如图：

 HTML：

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="博客实战">
    <meta name="description" content="htmlcss实战">
    <meta name="autor" content="twilight">

    <title>罗毅峰的作业</title>
    <link rel="stylesheet" type="text/css" href="css.css"/>
</head>

<body>
<!--头部-->
<div id="header">
    <div class="logo_title">
        <h3>LinuxCast.net Demo Site</h3>
        <p>LinuxCast.net演示页面，Linux学习不再晦涩难懂</p>
    </div>
    <div class="navi">
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">闲言碎语</a></li>
            <li><a href="">我是谁</a></li>
        </ul>
    </div>
    <div class="clear"></div>

</div>

<!--中部-->
<div id="wrapper">
    <div class="main">

        <div class="item">
            <div class="item_img">
                <img src="素材/1.png" alt="image"/>
            </div>

            <div class="item_content">
                <h3>示例标题示例标题</h3>
                <p class="item_info">作者:twilight 日期：2017-2-2</p>
                <p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
            </div>
        </div>

        <div class="item">
            <div class="item_img">
                <img src="素材/1.png" alt="image"/>
            </div>

            <div class="item_content">
                <h3>示例标题示例标题</h3>
                <p class="item_info">作者:twilight 日期：2017-2-2</p>
                <p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
            </div>
        </div>

        <div class="item">
            <div class="item_img">
                <img src="素材/1.png" alt="image"/>
            </div>

            <div class="item_content">
                <h3>示例标题示例标题</h3>
                <p class="item_info">作者:twilight 日期：2017-2-2</p>
                <p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
            </div>
        </div>

        <div class="item">
            <div class="item_img">
                <img src="素材/1.png" alt="image"/>
            </div>

            <div class="item_content">
                <h3>示例标题示例标题</h3>
                <p class="item_info">作者:twilight 日期：2017-2-2</p>
                <p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
            </div>
        </div>

        <div class="item">
            <div class="item_img">
                <img src="素材/1.png" alt="image"/>
            </div>

            <div class="item_content">
                <h3>示例标题示例标题</h3>
                <p class="item_info">作者:twilight 日期：2017-2-2</p>
                <p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
            </div>
        </div>

        <div class="item">
            <div class="item_img">
                <img src="素材/1.png" alt="image"/>
            </div>

            <div class="item_content">
                <h3>示例标题示例标题</h3>
                <p class="item_info">作者:twilight 日期：2017-2-2</p>
                <p class="item_desc">示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容示例内容</p>
            </div>
        </div>

    </div>

    <div class="sidebar">
        <div class="author">
            <div class="author_img">
                <img src="3.jpg"/>
            </div>
            <div class="author_info">
                <h4>twilight</p>
                <p>cease to struggle and you cease to live</p>
            </div>
        </div>
        <div class="article">
            <h3>推荐文章</h3>
            <ul>
                <li>推荐文章1</li>
                <li>推荐文章2</li>
                <li>推荐文章3</li>
                <li>推荐文章4</li>
                <li>推荐文章5</li>
                <li>推荐文章6</li>
            </ul>
        </div>
        <div class="site_info">
            <p>访客100</p>
            <p>文章数100</p>
        </div>
    </div>
    <div class="clear"></div>

</div>

<!--尾部-->
<div id="footer">
    <div class="left">Copyright © 1999-2016, balalalalal, All Rights Reserved</div>
    <div class="right">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>使用条款</li>
            <li>意见反馈</li>
        </ul>
    </div>
</div>
</body>
</html>

CSS：

body{
    background-image:url("2.jpg");
}

/*-------------头部-------------*/
#header{
    width:960px;
    color:gray;
    border-bottom:dashed 1px white;
    margin:0 auto;
    margin-bottom:10px;
}

.logo_title{
    float:left;
}

.logo_title h3{
    font-size:30px;
    margin-top:14px;
} 
.logo_title p{
    font-size:20px;
}

/*---------------------------------*/
.navi{
    float:right;
    margin:0 auto;
    margin-top:66px;
    color: red;
}
.navi a{
    color:grey;
    text-decoration:none;
}

.navi ul {
    list-style:none;
}
.navi ul li{
    display:inline;
    margin-right:8px;
    border:1px solid grey;
    padding:4px 8px;
    border-radius:6px;
}
.clear{
    clear:both;
}

/*----------------主体-----------------*/
#wrapper{
    width:960px;
    margin:0 auto;
    margin-bottom:15px;
}
.main{
    width:610px;
    background-color:white;
    border-radius:8px;
    float:left;
    padding:20px;
}
.item_img{
    float:left;
    margin:10px;
    margin-top:4px;
}
.item_img img{
    width:80px;
    height:80px;
}
.item_content{
    margin-left:100px;
}

.item_content h3{
    font-size:22px;
    color:#a5612d;
    margin:0;
}
.item_info{
    font-size:12px;
    font-style:italic;
    margin:0;
    color:#999;
}
.item_desc{
    font-size:14px;
    margin:0;
    color:gray;
    margin-top:10px;
    padding-left:5px;
    border-left:solid 1px #999;
}

.item{
    border-bottom:dashed 1px #999;
    padding :20px;
}
.sidebar{
    width:300px;
    background-color:white;
    border-radius:8px;
    float:right;
    padding-top:10px;
}

.author_img img{
    width:120px;
    height:120px;
    border-radius:10px;
}

.author_img{
    width:120px;
    height:120px;
    margin: 0 auto;

}

.author_info{
    margin: 10px 10px;
    padding:0;
    border:solid #ddd 1px;
    border-radius:8px;
    background-color:#eee;

}

.author_info h4{
    margin:0;
    padding:0;
    text-align:center;
    font-weight:bold;
}


.article h3{
    font-style:italic;
    margin-left:10px;
    border-bottom:dashed 1px #aaa;
    padding-bottom:4px;
}

.article ul {
    list-style:none;
    padding:0;
    margin-left:40px;
}

.site_info{
    border-top :dashed 1px #aaa;
}
.site_info p {
    text-align:center;
    font-size:12px;
    color:gray;
}






/*---------------尾部-----------------*/
#footer{
    width:960px;
    height:100px;
    margin:0 auto;
    background-color:blue;
    border-top:dashed white 1px;
}

#footer .left{
    color:grey;
    float:left;
    margin-top:10px;
}

#footer .right{
    color:grey;
    float:right;
    font-size:14px;

}

#footer .right ul {
    margin-top:10px;
    list-style:none;
}

#footer .right ul li {
    display:inline-block;
    margin-right:5px;
}

猜你喜欢

转载自blog.csdn.net/weixin_41466575/article/details/83627823
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
女程序员是这样被恶搞的
B/S 和 C/S 的优缺点
vector一直申请会怎样？
座头鲸识别比赛(Humpback Whale Identification)总结
Linux高性能服务器编程——I/O复用 select
Mysql连接数据库（当包使用）
通过URI获取的文件路径为null的解决方法
1022-Primes on Interval(素数筛选+二分查找) ZCMU
Python出现： TypeError: expected string or buffer
bzoj2434: [Noi2011]阿狸的打字机 ac自动机+树状数组
每日归档
更多
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022