先展示效果图：

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

通过 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. Node.js 字体格式转换 ttf2eot ttf2woff ttf2svg

    前几天为了查找字体转换工具网上搜索,既然用 Node.js 来做的工具. https://github.com/fontello/ttf2eot https://github.com/fontello ...

  2. 关于js事件委托

    由于事件处理程序可以为现代 Web 应用程序提供交互能力,因此许多开发人员会不分青红皂白地 向页面中添加大量的处理程序. 在创建 GUI 的语言(如 C#)中,为 GUI 中的每个按钮添加一个 onc ...

  3. 将xml文件作为一个小的数据库，进行学生的增删改查

    1.xml文件: <?xml version="1.0" encoding="UTF-8"?><Students> <studen ...

  4. 监控Tomcat解决方案（监控应用服务器系列文章分享）

    使用JMX接口开发监控程序  ◆ 全部代码需要从零开始,代码量较大  ◆ 支持各不同版本比较麻烦,每个版本可能有差异  ◆ 可支配性强  ◆ 最重要的一个缺点是,配置比较麻烦 Tomcat激活JMX远 ...

  5. dhtmlxTree介绍(转载)

    dhtmlxTree 是树菜单,允许我们快速开发界面优美,基于Ajax的javascript库. 她允许在线编辑,拖拽,三种状态(全选.不选.半选),复选框等模式.同时在加载大数据量的时候,仍然 可以 ...

  6. 甲鱼od19篇随笔

    在一个程序里会有多个对话框,这时要准确的判断要找的对话框就比较困难了所以这里就需要借助 1:Resource Hacker工具来准确的定位涉及到的对话框 2:在od中查找指令,然后在所有找到的指令上下 ...

  7. 多线程编程1 - NSThread

    每个iOS应用程序都有个专门用来更新显示UI界面.处理用户的触摸事件的主线程,因此不能将其他太耗时的操作放在主线程中执行,不然会造成主线程堵塞(出现卡机现象),带来极坏的用户体验.一般的解决方案就是将 ...

  8. SQL Server 数据类型

    数据类型的选择帮助优化查询,比如针对int类型列和针对文本类型列可能会生成完全不同的查询计划 三种数据类型: 系统数据类型 别名数据类型:用户可以为系统数据类型提供一个别名,并且可以对数据类型做进一步 ...

  9. JavaWeb学习--Servlet认识

    Servlet开发 用户在浏览器中输入一个网址并回车,浏览器会向服务器发送一个HTTP请求.服务器端程序接受这个请求,并对请求进行处理,然后发送一个回应.浏览器收到回应,再把回应的内容显示出来.这种请 ...

  10. kvm 网桥

    root@ok Downloads]# cat /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 HWADDR=54:EE:75:4E:37: ...