先展示效果图：

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

通过 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>

然后是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;

}

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

第二个div+css前端项目的更多相关文章

  1. 【转】一个DIV+CSS代码布局的简单导航条

    原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...

  2. 前端之DIV+CSS布局

    刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...

  3. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  4. 后端码农谈前端（CSS篇）第二课：CSS的5个来源

    0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...

  5. 【笔记-前端】div+css排版基础，以及错误记录

    现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...

  6. CSS+DIV网页样式与布局：第二章：CSS的基本语法

    第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...

  7. 项目实战之玩转div+css制作自己定义形状

    项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...

  8. 项目期复习总结2：Table， DIV+CSS，标签嵌套规则

    文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...

  9. DIV+CSS系统学习：转载

    第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...

随机推荐

  1. Django~automated tests

    def xx(): 冒号下一行要缩进 ATD http://blog.csdn.net/doupei2006/article/details/7657547 http://www.jb51.net/a ...

  2. Effective C++ -----条款53：不要轻忽编译期的警告

    严肃对待编译器发出的警告信息.努力在你的编译器的最高(最严苛)警告级别下争取“无任何警告”的荣誉. 不要过度依赖编译器的报警能力,因为不同的编译器对待事情的态度并不相同.一旦移植到另一个编译器上,你元 ...

  3. (2016弱校联盟十一专场10.2) A.Nearest Neighbor Search

    题目链接 水题,算一下就行. #include <bits/stdc++.h> using namespace std; typedef long long ll; ll x[],y[], ...

  4. 查看Linux内核

    方法一: 命令: uname -a 作用: 查看系统内核版本号及系统名称 方法二: 命令: cat /proc/version 作用: 查看目录"/proc"下version的信息 ...

  5. IOS - Objective-C NSArray和NSMutableArray的详解 使用

    原文地址:http://blog.csdn.net/totogo2010/article/details/7729377 Objective-C的数组比C++,Java的数组强大在于,NSArray保 ...

  6. iOS应用架构谈（一）：架构设计的方法论

    当我们讨论客户端应用架构的时候,我们在讨论什么? 其实市面上大部分应用不外乎就是颠过来倒过去地做以下这些事情: 简单来说就是调API,展示页面,然后跳转到别的地方再调API,再展示页面. 那这有什么好 ...

  7. 解决 The MySQL server is running with the --skip-grant-tables option so it cannot execute this statement

    这个时候我们只需要flush privileges 一下就OK了,mysql> flush privileges;Query OK, 0 rows affected (0.01 sec)

  8. js对象的创建与原型总结

    //1 新建对象 var box = new Object(); box.name = "lee"; box.age = 100; box.run = function(){ re ...

  9. myaql常用函数

    一.数学函数 abs(x)   返回x的绝对值 bin(x)   返回x的二进制(oct返回八进制,hex返回十六进制) ceiling(x)   返回大于x的最小整数值 exp(x)   返回值e( ...

  10. 查看centos的版本

    [root@NB Desktop]# lsb_release -a LSB Version: :base-4.0-amd64:base-4.0-noarch:core-4.0-amd64:core-4 ...