先展示效果图：

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

通过 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. MySQL表字段长度的限制

    在MySQL建表时,遇到一个奇怪的现象: root::>CREATE TABLE tb_test ( ) NOT NULL, ) DEFAULT NULL, ) DEFAULT NULL, ) ...

  2. Android屏幕适配dp、px两套解决办法

    "又是屏幕适配,这类文章网上不是很多了吗?" 我也很遗憾,确实又是老问题.但本文重点对网上的各种方案做一个简短的总结,和具体使用方法. 若想了解具体Android设备适配的前世因果 ...

  3. 【leetcode】Set Matrix Zeroes（middle）

    Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in place. 思路:不能用 ...

  4. 【leetcode】Excel Sheet Column Title & Excel Sheet Column Number (easy)

    Given a positive integer, return its corresponding column title as appear in an Excel sheet. For exa ...

  5. 基于SSH2的OA项目1.0_20161206_需求分析与框架搭建

    1. SSH项目 OA项目,办公自动化,将公司的数据,文档,流程实现在系统中的管理. 降低人员交流过程中的成本.提高办公的效率. 2 .系统管理 主要实现系统权限的管理,不同的用户登陆后看到菜单项不一 ...

  6. Spring自动装配与扫描注解

    1 javabean的自动装配 自动注入,减少xml文件的配置信息. <?xml version="1.0" encoding="UTF-8"?> ...

  7. ios安装cocoaPods

    1. 安装 a. 查看源 i.   gem sources -l b. 删除源 i.   sudo gem sources -r https://rubygems.org/ c. 设置源 i.   s ...

  8. September 20th 2016 Week 39th Tuesday

    Failure is not fatal, but failure to change might be. 失败并不致命,但无法改变却可能是致命的. I need change, but it see ...

  9. python基础——面向对象编程

    python基础——面向对象编程 面向对象编程——Object Oriented Programming,简称OOP,是一种程序设计思想.OOP把对象作为程序的基本单元,一个对象包含了数据和操作数据的 ...

  10. 瓦片地图与geoserver发布

    本文主要包括以下内容 TileMill生成Tile影像金字塔(.mbtiles压缩文件) Mbutil(https://github.com/mapbox/mbutil)解压缩 Apache HTTP ...