第二个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> </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前端项目的更多相关文章
- 【转】一个DIV+CSS代码布局的简单导航条
原文地址:http://www.divcss5.com/shili/s731.shtml 简单的DIV CSS代码布局实现导航条 一个蓝色主题的导航条布局案例,本CSS小实例,采用DIV CSS实现. ...
- 前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
- 后端码农谈前端（CSS篇）第二课：CSS的5个来源
0.浏览器默认样式 当你不为html元素设置任何样式时,显示在浏览器上的(比如:<b>元素会显示粗体.<p>元素有纵向margin.<h1>元素字号比<p&g ...
- 【笔记-前端】div+css排版基础，以及错误记录
现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可 ...
- CSS+DIV网页样式与布局：第二章：CSS的基本语法
第二章:CSS的基本语法 一 CSS选择器(所有的HTML语言中的标记都是通过不同的css选择器进行控制的).用户只需要 通过选择器对不同的HTML标签进行控制,并赋予各种样式声明,即可实现各种效果. ...
- 项目实战之玩转div+css制作自己定义形状
项目需求 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/diss ...
- 项目期复习总结2：Table， DIV+CSS，标签嵌套规则
文件夹: 1.表格的意义,含义? 2.表格有哪些元素? 3.表格布局,表格布局的优缺点 4.行元素,块元素的差别? 5.标签的合理嵌套及标签的语义性 ① 表格的意义,含义? 表格应该用来展现那些适合表 ...
- DIV+CSS系统学习：转载
第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师 web网站架构师 自己创业 转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才 结合最新的 ...
随机推荐
- linux线程的实现
首先从OS设计原理上阐明三种线程:内核线程.轻量级进程.用户线程 内核线程 内核线程就是内核的分身,一个分身可以处理一件特定事情.这在处理异步事件如异步IO时特别有用.内核线程的使用是廉价的,唯一使用 ...
- ASM:《X86汇编语言-从实模式到保护模式》第8章：实模式下硬盘的访问，程序重定位和加载
第八章是一个非常重要的章节,讲述的是实模式下对硬件的访问(这一节主要讲的是硬盘),还有用户程序重定位的问题.现在整理出来刚好能和保护模式下的用户程序定位作一个对比. ★PART1:用户程序的重 ...
- 【leetcode】Maximum Gap(hard)★
Given an unsorted array, find the maximum difference between the successive elements in its sorted f ...
- 【linux】学习1
郁闷啊 好多东西要学 下面大概就是鸟哥那本书的第五章内容吧 linux命令: Ctrl + Alt + F1 ~ F6 : 切换终端 ls -al ~ :显示主文件夹下的所有隐藏文件 date: ...
- 【python】pymongo查找某一时间段的数据
python中实现: 下面代码就是查找2016-09-26 00:00:00 ~ 2016-09-27 00:00:00 时间段的数据 from datetime import datetimefor ...
- noip2016复习
明天的复习任务 矩阵乘法 优先队列(老忘记怎么打) 二分图 K短路 单调队列(还是不太明白各种顺序) 扩展欧几里得 费马小定理求素数 哎呀,列了这么多,任重而道远啊-- 今夕是何夕,晚风过花庭-- 故 ...
- Cocoapods的安装报错 - Error installing pods:activesupport requires Ruby version >=2.2.2
1.打开终端 2 移除现有 Ruby 默认源 输入以下指令 $gem sources --remove https://rubygems.org/ 3.使用新的源 输入以下指令 $gem source ...
- 20145206邹京儒《Java程序设计》第一周学习总结
20145206 <Java程序设计>第1周学习总结 教材学习内容总结 1.三大平台:Java SE.Java EE与Java ME.Java SE是各应用平台的基础,分为四个主要的部分: ...
- hdu 1257 最少拦截系统
#include<time.h> #include <cstdio> #include <iostream> #include<algorithm> # ...
- 【数据库】 防止sql注入,过滤敏感关键字
private bool FilterIllegalChar(string sWord) { var result = false; var keyWord = @"select|inser ...