先展示效果图：

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

通过 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. ubuntu apc 安装

    在ubuntu下安装APC,只需要两条命令,便可将APC和php绑一起.     安装代码:          sudo apt-get install  -y apache2-prefork-dev ...

  2. 【leetcode】Validate Binary Search Tree（middle）

    Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is defined as ...

  3. 混合高斯模型：opencv中MOG2的代码结构梳理

    /* 头文件:OurGaussmix2.h */ #include "opencv2/core/core.hpp" #include <list> #include&q ...

  4. IOS- 堆和栈 详解

    Objective-C的对象在内存中是以堆的方式分配空间的,并且堆内存是由你释放的,即release 栈由编译器管理自动释放的,在方法中(函数体)定义的变量通常是在栈内,因此如果你的变量要跨函数的话就 ...

  5. php安全编程： register_globals的安全性

    register_globals?本身并非安全风险.但是,它为跟踪用户输入和确保应用程序安全增加了难度.为什么会这样? 因为如果打开 register_globals,在全局名称空间和 $_GET.$ ...

  6. 在Eclipse中创建Maven多模块工程的例子

    .配置eclipse的maven .在Eclipse里面New -> Maven Project -> 选择“Create a simple project” Group Id: com. ...

  7. 优化MyBatis配置文件中的配置

    一.为实体类定义别名,简化sql映射xml文件中的引用 之前,我们在sql映射xml文件中的引用实体类时,需要写上实体类的全类名(包名+类名),如下: <!-- 创建用户(Create) --& ...

  8. 20145206《Java程序设计》实验五Java网络编程及安全

    20145206<Java程序设计>实验五 Java网络编程及安全 实验内容 1．掌握Socket程序的编写: 2．掌握密码技术的使用: 3．设计安全传输系统. 实验步骤 我和201451 ...

  9. 与你相遇好幸运，The Moe Node.js Code Style Guide

    The Moe Node.js Code Style Guide  By 一个最萌的开发者 @2016.9.21 >>代码是人来阅读的,格式规范的代码是对编程人员最好的礼物 :) > ...

  10. C#关键字params

    using System; using System.Threading; namespace Test { /// <summary> /// params用法: 1.用来修饰方法的参数 ...