第二个div+css前端项目

先展示效果图：

为了看全景，截图有点挫。实际效果比这个好一点。

通过 text-overflow可以隐藏多出的文字，而不会吧把div撑开或者溢出。

html代码：

<!DOCTYPE html>
<html>
<head>
    <title>3.6practace</title>
    <link rel="stylesheet" type="text/css" href="3.6.css">
</head>
<body>
    <div id="box">
        <div id="top">
            <div id="top-1">
                <img src="./images/3403.png">
            </div>
            <div id="top-2">
                登錄
            </div>
        </div>
        <div id="top2">
            <ul>
                <li>主頁</li>
                <li>公司简介</li>
                <li>投资组合</li>
                <li>联系我们</li>
                <li>社区论坛</li>
                <li>成功案例</li>
                <li>相关</li>
            </ul>
        </div>
        <div id="main">
            <img src="./images/3405.jpg" alt="主页图片">
            <div id="main-1">
                <img src="./images/3408.png" alt="" id="main-1-img1" onmouseover="this.src='./images/3407.png'" onmouseout="this.src='./images/3408.png'">
                <img src="./images/3409.png" alt="" id="main-1-img2">
                <img src="./images/3411.png" alt="" id="main-1-img3">
                <img src="./images/3410.png" alt="" id="main-1-img4">
                <img src="./images/3412.png" alt="" id="main-1-img5">
            </div>
        </div>
        <div id="main2">
            <div id="main2-left" class="font01">
                网站类型套餐参考
                <div class="text" id="text1">这里随便写点东西这里随便写点东西这里随便写点东西</div>
                <div class="text" id="text2">这里随便写点东西这里随便写点东西这里随便写点东西</div>
                <div class="text" id="text3">这里随便写点东西这里随便写点东西这里随便写点东西</div>
            </div>
            <div id="main2-1" class="main"></div>
            <div id="main2-2" class="main">
                <h2>标题1</h2>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <h2>标题2</h2>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <h2>标题3</h2>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>        
        </div>
    </div>
    <div id="bottom">
        <p>&nbsp;</p>
        <p>天空设计工作室没有什么我们不能做<br />
          业务专用邮箱：Sky@china-ncw.com 联系电话：010-89888888 010-00000000 <br />
          Copyright © 2009 sky-ncw.com. All Right Reserved V2.0 </p>
        </div>
</body>
</html>
View Code

然后是css代码

*{
    margin: 0px;
    padding: 0px;
    border: 0px;
}
body{
    background-image: url(./images/3401.png);
    background-repeat: repeat-x;
    font-family: "宋体";
    font-size: 12px;
    color: #666666;
    line-height: 19px;
}
#box{
    width: 100%;
    height: 947px;
    background-image: url(./images/3404.png);
    background-repeat: no-repeat;
    background-position: center 195px;
}
#top{
    padding-top:8px;
    margin: auto;
    width: 960px;
    height: 106px;
    background-image: url(./images/3402.png);
    background-repeat: no-repeat;
}
#top-1{
    width: 200px;
    height: 103px;
    display: inline-block;
}
#top-2{
    width: 80px;
    height: 20px;
    margin: 40px 0px 0px 0px;
    float: right;
}
#top2{
    margin: auto;
    width: 960px;
    height: 40px;
    font-family: "微软雅黑";
    font-size: 18px;
    color: #144c81;
}
#top2 li{
    width: 100px;
    height: 25px;
    float: left;
    text-align: center;
    list-style-type: none;
    margin-top: 10px;
}
#main{
    margin: auto;
    width: 960px;
    height: 417px;
}
#main-1{
    margin-top: 20px ;
    width: 1160px;
    height: 96px;
}
#main2{
    margin: 20px auto;
    width: 1000px;
    /*border:2px dashed red;*/
}
#main2 #main2-left{
    width: 300px;
    height: 256px;
    margin: 10px 10px 0px 10px;
    padding-left: 3px;
    float: left;
    border: 1px solid;
}
.font01{
    color: #144c81;
    font-size: 15px;
    font-family: "微软雅黑"
    line-height:30px;
}
.text{
    width: 260px;
    height: 68px;
    padding-left: 40px;
    padding-top: 10px;
    /*border: 1px solid;*/
    border-bottom: 1px dashed;
    font-family: "楷体";
    line-height: 30px;
}
#text1{
    border-top: 1px dashed;
    background-image: url(./images/d1.png) ;
    background-repeat: no-repeat;
}
#text2{
    background-image: url(./images/d2.png);
    background-repeat: no-repeat;
}
#text3{
    background-image: url(./images/d3.png);
    background-repeat: no-repeat;
}
.main{
    width: 300px;
    height: 256px;
    margin: 10px 10px 0px 10px;
    float: left;
    /*background: red;*/
    border: 1px dashed green;
}
#main2-1{
    background-image: url(./images/2413.jpg);
    background-repeat: no-repeat;
}
#main2-2{
    padding: 10px;
    font-family: "楷体";
    text-overflow: ellipsis;
    overflow: hidden;

}
#main2-2 h2{
    font-family: "宋体";
}
#main2-2 p{
    font-size: 15px;
    line-height: 33px;
}

#bottom{
    width: 100%;
    height: 100px;
    background-color: #185488;
    color: #fff;
    line-height: 20px;
    text-align: center;
}
View Code

感到绝望，毫无审美感觉的我怎么能学前端呢？？？

 

posted @ 2016-11-14 19:27  超级学渣渣  阅读(986)  评论(0)  编辑  收藏  举报