前端学习-双汇的成长日记-index

最新推荐文章于 2024-10-04 00:46:18 发布

kitty479655237

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量213

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/kitty479655237/article/details/79508746

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双汇的成长日记</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="container">
    <div id="header">

        <a href="http://www.baidu.com" target="_blank"></a>
        <h1>双汇的成长日记</h1>

        <ul id="nav" >
            <li><a href="#">导航1</a></li>
            <li><a href="#">导航2</a></li>
            <li><a href="#">导航3</a></li>
            <li><a href="#">导航4</a></li>
            <li><a href="#">导航5</a></li>
            <li><a href="#">导航6</a></li>
            <li><a href="#">导航7</a></li>
        </ul>
        <img src="dddddd.png" alt="" id="logo"   style="position: absolute" >
    </div>
    <div id="main">
        <div id="lside">
            <div class="subtitle">
                <h2>介绍</h2>
                <a href="#">more&gt;&gt;</a>

            </div>
            <div class="four">
                <h3>马猴烧酒狗子的简单介绍</h3>
                <img src="QQ图片20170619140839.png" alt="" />
                <ul>
                    <li><a href="#">姓名：双汇</a></li>
                    <li><a href="#">品种：腊肠犬</a></li>
                    <li><a href="#">性别：母狗</a></li>
                    <li><a href="#">体重：15斤</a></li>
                    <li><a href="#">年龄：1岁</a></li>
                </ul>
            </div>
            <div class="four">
                <h3>马猴烧酒狗子的简单介绍</h3>
                <img src="QQ图片20170619140839.png" alt="" />
                <ul>
                    <li><a href="#">姓名：双汇</a></li>
                    <li><a href="#">品种：腊肠犬</a></li>
                    <li><a href="#">性别：母狗</a></li>
                    <li><a href="#">体重：15斤</a></li>
                    <li><a href="#">年龄：1岁</a></li>
                </ul>
            </div>
            <div class="four">
                <h3>马猴烧酒狗子的简单介绍</h3>
                <img src="QQ图片20170619140839.png" alt="" />
                <ul>
                    <li><a href="#">姓名：双汇</a></li>
                    <li><a href="#">品种：腊肠犬</a></li>
                    <li><a href="#">性别：母狗</a></li>
                    <li><a href="#">体重：15斤</a></li>
                    <li><a href="#">年龄：1岁</a></li>
                </ul>
            </div>

            <div class="four">
                <h3>马猴烧酒狗子的简单介绍</h3>
                <img src="QQ图片20170619140839.png" alt="" />
                <ul>
                    <li><a href="#">姓名：双汇</a></li>
                    <li><a href="#">品种：腊肠犬</a></li>
                    <li><a href="#">性别：母狗</a></li>
                    <li><a href="#">体重：15斤</a></li>
                    <li><a href="#">年龄：1岁</a></li>
                </ul>
            </div>
        </div>
        <div id="rside">
            <div class="subtitle">
                <h2>成长日记</h2>
                <a href="#">more&gt;&gt;</a>
            </div>
            <ul id="art">
                <li><a href="">日记1</a></li>
                <li><a href="">日记2</a></li>
                <li><a href="">日记3</a></li>
                <li><a href="">日记4</a></li>
                <li><a href="">日记5</a></li>
                <li><a href="">日记6</a></li>
                <li><a href="">日记7</a></li>
                <li><a href="">日记8</a></li>
            </ul>
            <div class="subtitle">
                <h2>联系方式</h2>
                <a href="#">more&gt;&gt;</a>
            </div>
            <div id="contact">
                电话号码：1888888888
                地址：浙江省杭州市萧山区
            </div>
        </div>
        <div class="clr"></div>
    </div>
    <div id="footer">
        <ul>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
        <address> &copy; 2014-2018 浙江省杭州市上城区望江国际2幢7楼 版权所有 http://51duoduo.com </address>
    </div>
</div>
</body>
</html>

#container {
    background: white;
    width:1020px;
    margin: 0 auto ;
    line-height: normal;
}

#header {
    background: gray url("timg (47).jpg");
    height: 122px;
    color:hotpink;
}

.subtitle a{
    float: right;
}
.subtitle h2{
    float:left;
}
#nav li{
    background: powderblue;
    width: 143.7px;
    margin:1px;
    float: left;
    position: relative;
    top: 80px;
    font-size: 12px;
    text-align: center;
}
.clr {
    clear: both;
    width: 0;
    height: 0;
}

#logo {
    transform: scale(0.13);
    top: -400px;
    left: 250px;
    float: left;
}
h1 {
    text-align: center;
}
}
#main {
    background:white;
    width:1020px;
}

#lside {
    background: white;
    height: 640px;
    float:left;
    width: 680px;
    border: 1px solid lightgray;
}
.subtitle {
    height:30px;
    background:lightgray;
}

.subtitle h2{
    margin-left: 10px;
    font-size: 16px;
    font-family: "Microsoft YaHei", serif ;
}

.subtitle a{
    font-size:12px;
    color: gray;
}

.four {
    width:280px;
    height: 240px;
    background: white;
    float: left;
    margin: 10px;
    color: black;
    padding: 20px;
}
.four h3{
    margin-bottom: 10px;
}

.four img{
    transform: scale(1);
    float: left;
    margin-left: 10px;
    padding: 6px;
    background: white;
}
.four ul{
    float: left;
    margin-left: 10px;

}

.four li{
    background: white;
    padding-left: 10px;
    height: 24px;
}
.four a {
    color: gray;
}
.four a:visited{
    color: lightgray;
}

#name{
    color: red;
}

#rside {
    float:right;
    height: 642px;
    width: 337px;
    background: purple url(21.jpg);
}

#art a{
    display: block;
    height: 18px;
    padding-left: 18px;
    margin-top:5px;
    padding-top:8px;
}
#contact {
    height:20px;
}
#footer {
    height: 120px;
    background: powderblue;
}
#footer li{
    float:left;
    margin-right:10px;
    margin-top:15px;

}
#footer ul{
    height: 40px;
}
#footer address{
    font-family: 黑体,serif;
    font-size: 12px;
}
#nav a {
    color:darkblue;
}
#nav a:visited {
    color:darkgray;
}
#nav a:hover {
    color:red;
    background: whitesmoke;
    width: 143.7px;
    display: block;
}
#nav a:active {
    color:black;
}