html/css静态网页制作
2024-05-19 22:34:34
任务要求：
简单对网页进行分割布局，基本思路上中下三部分，然后在每一部分细分
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link href="qiyecss/qiye.css" type="text/css" rel="stylesheet"> </head><body> <div id="body"><div id="top"><div class="logo"></div><div class="search">搜索产品<input class="text" type="text" name="" value="" ><input class="button" type="button" name="" value=""></div></div><div id="back_top"><div class="back_a"></div><div class="back_b"></div><div class="back_one"><ul><li><a href="#">首页</a></li><li><a href="#"><span >企业新闻</span></a></li><li><a href="#">企业简介</a></li><li><a href="#">产品展厅</a></li><li><a href="#">企业历史</a></li><li><a href="#">招商加盟</a></li><li><a href="#">网上下单</a></li><li><a href="#">联系我们</a></li></ul></div><!--<div style="clear: both"></div>--><div class="back_two"><ul><li><a herf="#">企业动态</a></li><li><a herf="#">领导产品</a></li><li><a herf="#">产品咨询</a></li><li><a herf="#">通知公告</a></li></ul></div></div><div id="content_top"><div class="content_left"><div clss="sign_she"><img src="data:images/pic.jpg" alt=""></div><div class="sign_shang"></div><div class="sign_ren"></div></div><div class="content_middle"><div class="xuxian"><p class="p">苹果iphone 4手机将于9月25日在中国上市</p><p>日前中国联通正式宣布将于9月25日9时在中国大陆市场全面推出iPhone4，并为iPhone4用户量身定制了合约计划。</p></div><!-- <hr>--><ul><li><a href="#">纯CSS实现三列DIV等高布局</a><span>9-22</span></li><li><a href="#">HTML元素的ID和Name属性的区别</a><span>9-22</span></li><li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a><span>9-22</span></li><li><a href="#">DIV+CSS实现放大镜效果的分页样式</a><span>9-22</span></li><li><a href="#">javascript为FF设置首页</a><span>9-22</span></li><li><a href="#">复制到系统剪贴板之IE,ff兼容版</a><span>9-22</span></li></ul></div><div class="content_right"><div class="right_one"><span style="color: red"> 产品</span>导购</div><div class="right_two"><div class="yuyin"><b>语音业务</b><br>普通电话 | 语音数字中继</div></div><div class="right_three"><div class="yuyin"><b>语音业务</b><br>普通电话 | 语音数字中继</div></div><div class="right_four"><div class="yuyin"><b>语音业务</b><br>普通电话 | 语音数字中继</div></div><div class="right_five"></div></div></div><!--内容图片去--><div id="content_two"><div class="zuobian"><div class="images"><div class="zuobian_top"> <b><span>热门</span>产品</b></div><div class="xiangce"><ul><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li><li><a href="#"><img src="data:images/pic4.gif" alt="">产品名称</a></li></ul></div></div><div class="history_left"><div class="history_lefttop"><span style="padding: 30px"><b>企业历史</b></span><!--设置padding-left无效--><div class="more"><span style="padding:0px 0px 0px 30px ;font-size: 14px;"><a href="#">更多..</a></span></div> </div><div class="history_leftcontent"><a class="history_apple" href="#"><img src="data:images/pic5.gif"></a><a style="text-decoration: none" href="#">多角度对比 苹果iPod系列真机</a><br>导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播…</div><div class="history_leftlist"><ul><li><a href="#">纯CSS实现三列DIV等高布局</a></li><li><a href="#">HTML元素的ID和Name属性的区别</a></li><li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li><li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li><li><a href="#">javascript为FF设置首页</a></li><li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li></ul></div></div><div class="history_right"><div class="history_righttop"><span style="padding: 30px"><b>企业历史</b></span><!--设置padding-left无效--><div class="more"><span style="padding:0px 0px 0px 30px ;font-size: 14px;"><a href="#">更多..</a></span></div></div><div class="history_leftcontent"><a class="history_apple" href="#"><img src="data:images/pic5.gif"></a><a style="text-decoration: none" href="#">多角度对比 苹果iPod系列真机</a><br>导言：北京时间9月2日凌晨1点苹果在旧金山举行新品发布会，数码特派记者在美国现场直播…</div><div class="history_leftlist"><ul><li><a href="#">纯CSS实现三列DIV等高布局</a></li><li><a href="#">HTML元素的ID和Name属性的区别</a></li><li><a href="#">完美兼容ie6,ie7,ie8以及firefox的css透明滤镜</a></li><li><a href="#">DIV+CSS实现放大镜效果的分页样式</a></li><li><a href="#">javascript为FF设置首页</a></li><li><a href="#">复制到系统剪贴板之IE,ff兼容版</a></li></ul></div></div></div><div class="youbian"><div class="questions"><div class="que1"><span style="color: red"> 使用</span>问答</div><div class="que2"><ul><li>最新出的这个产品如何使用？</li><li>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</li></ul></div><div class="que3"><ul><li>最新出的这个产品如何使用？？</li><li>该产品采用全新的技术，较上一...</li></ul></div><div class="que4"><ul><li>最新出的这个产品如何使用？？</li><li>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了....</li></ul></div><div class="que5"><ul><li>最新出的这个产品如何使用？？</li><li>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了....</li></ul></div><div class="que6"><ul><li>最新出的这个产品如何使用？？</li><li>该产品采用全新的技术，较上一产品有质的飞跃，功能上增强了许多，使用方法更加简便...</li></ul></div><div class="que7"> </div></div><div class="iphone"><div class="ipone_top"><span style="color: red"> 联系</span>我们</div><div ipone_image><img src="data:images/tel.gif" alt=""></div></div></div></div><!--底部--> <div id="foot"><div class="foot_top"><center><a href="#">关于我们 || 产品目录 || 联系我们 || 友情链接 || 反馈问题 || 广告合作</a></center></div><div class="foot_foot"><center><p>Copyright © 2007 - 2010 aa25.cn All Rights Reserved</p><p>标准之路 版权所有 京ICP备10007159号</p></center></div></div> </div> </body> </html>
html代码区
/* CSS Document */
*{margin: 0;padding: 0;
}
#body{margin: 0 auto;width: 905px;height: 1200px;
}
/*顶部div*/
#top{width: 100%;height: 75px;}
/*中间div*/
#content_top{width: 100%;height: 260px;margin-top: 10px;}.logo{background-image:url(../images/logo.jpg);background-repeat: no-repeat;height: 75px;width: 185px;background-position:0 50%;display: inline-block;float: left;/*即使给div设置了宽，依然独占一行，所以要设置成行内元素*/}.search{width: 277px; display: inline-block;float: left;margin-left: 638px; margin-top: -36px;font-size: 13px;
}
.button{background:none;background-image: url(../images/btn_srh.gif);width: 58px;height: 23px;border: none;
}
.text{background: none;background-image: url(../images/srh_bg.gif);}
/*顶部背景图*/
#back_top{height: 66px;width: 100%;background-image:url(../images/../images/nav_bg.gif);background-repeat: repeat-x;
}
/*导航栏*/
.back_a{float: left;height: 66px;width: 4px;background:url(../images/../images/nav_bg.gif) no-repeat;background-position: 0 33%;overflow: hidden;
}
.back_b{height: 66px;width: 4px;background:url(../images/../images/nav_bg.gif) no-repeat;background-position: -6px -66px;overflow: hidden;float: right;
}
.back_one ul li{list-style: none;float: left;margin: 7px 25px;}
.back_one ul li a{text-decoration: none;color: white;font-weight:bold;
}.back_one ul li a span{background-image: url(../images/../images/nav_bg.gif);overflow: hidden;background-position: -2px -132px;color: #000000;text-align: center;display: inline-block;height: 30px;width: 94px;}.back_two ul li{font-size: 12px;list-style: none;float: left;margin-left: 29px;margin-top: 6px;
}
.back_two ul{position: absolute; /* 添加absoulute目的是脱离文本流，不受上层影响*/top: 35px;
}/*中部部内*/
.content_left{height: 255px;width: 272px;display: inline-block;float: left;
}.sign_shang{height: 39px;width: 131px;background-image: url(../images/../images/btn_login.gif);display: inline-block;float: left;
}.sign_ren{height: 39px;width: 131px;background-image: url(../images/../images/../images/btn_login1.gif);display: inline-block;float: left;margin-left: 6px;}
/*上部中间*/
.content_middle{height: 255px;width: 390px;background-image: url(../images/../images/hot_bg.gif);background-repeat: no-repeat;display: inline-block;float: left;margin-left: 5px;}
.content_middle .p{font-size: 18px;font-weight: bold;text-align: center;margin-top: 15px;
}
.content_middle p{font-size: 13px;margin: 15px;
}
.content_middle ul li{list-style-image:url(../images/wuxu.jpg);font-size: 13px;margin:3px 36px 0;
}
.content_middle span{display: inline-block;float: right;color: #7B9F11;
}
.content_middle a{text-decoration: none;color: #000000;
}
.conten_middle .xuxian{border: 1px #CCCCCC dashed;width: 350px;height: 80px;} /*不显示,设置边框无用*//*上部右方*/
.content_right{height: 255px;width: 230px;float: left;margin-left: 7px; background-image: url(../images/side_bg.gif);}.right_one{ height: 28px;width: 100%;line-height: 28px;margin: auto;
}.right_two{height: 74px;width: 207px;background-image: url(../images/../images/icon2.gif) ;background-repeat: no-repeat;background-position: 10px 11px;border-bottom-style:dashed;border-width: 0.1px;margin-left: 4px;font-size: 14px;}
.yuyin {position: relative;top:17px;right: -62px;
}.right_three{height: 74px;width: 207px;background-image: url(../images/../images/icon2.gif) ;background-repeat: no-repeat;background-position: 10px -60px;border-bottom-style:dashed;border-width: 0.1px;margin-left: 4px;font-size: 14px;}.right_four{height: 74px;width: 207px;background-image: url(../images/../images/icon2.gif) ;background-repeat: no-repeat;background-position: 10px -134px;margin-left: 4px;font-size: 14px;}.right_five{height: 5px;width: 100%;background-image: url(../images/side_bg.gif);background-position: 0% 100%;
}
/*内容第二部分*/
#content_two{height: 630px;width: 100%;margin:auto;
}.images{border: 1px solid #DBDBDB;height: 293px;width: 660px;display: inline-block;float: left;margin-top: 10px;/*为什么之右images也浮动起来，下面的才能上来*/
}
.zuobian_top{height: 30px;width: 100%;background-color: #F7F7F7;line-height: 30px;}.xiangce ul li{list-style: none;float: left;}
.xiangce ul li img{display: block;margin:0 auto;
}.xiangce ul li a{display:block;text-align: center;margin: 20px 0px 0px 20px;text-decoration: none;color: #000000;font-size: 14px
}/*企业历史左边的*/.history_left{border: 1px solid #DBDBDB;height: 288px;width: 327px;float: left;display:inline-block;margin-top: 10px;
}.history_lefttop{height: 30px;width: 100%;background-color: #F7F7F7;line-height: 30px;background-image: url(../images/icon.gif) ;/*如何用img实现backgrondposition的效果*/background-repeat: no-repeat;background-position: 10px 5px;overflow: hidden;
}
.more{width: 70px;height: 30px;background-image: url(../images/icon.gif) ;background-repeat: no-repeat;background-position: 10px 5px;overflow: hidden;display: inline-block;float: right;
}
.history_leftcontent{font-size: 13px;margin: 17px;color: #A7A3A4;
}
.history_leftcontent .history_apple{margin-right: 15px;float: left;
}
.history_leftlist a{text-decoration: none;color: #000000;
}
.history_leftlist ul li{list-style-image:url(../images/wuxu.jpg);font-size: 13px;margin:3px 0px 3px 32px;
}.history_right{border: 1px solid #DBDBDB;height: 288px;width: 327px;float: left;display: inline-block;margin-top: 10px;margin-left: 5px;
}
.history_righttop{height: 30px;width: 100%;background-color: #F7F7F7;line-height: 30px;background-image: url(../images/icon.gif) ;/*如何用img实现backgrondposition的效果*/background-repeat: no-repeat;background-position: 10px 5px;overflow: hidden;
}
/*右边问答区*/
.questions{height: 434px;width: 229px;margin-top: 10px;font-size: 13px;display: inline-block;margin-left: 12px;background-image: url(../images/side_bg.gif);background-repeat: no-repeat;overflow: hidden;background-position: 0% 0%;
}
.que1{font-size: 16px;height: 28px;width: 100%;line-height: 28px;margin: auto;
}
.que2,.que6{margin: 5px 5px 0px 30px;
}
.questions ul{list-style-image: url( ../images/wuxu.jpg);margin-bottom: 10px;
}.que3{border: 1px dashed #DCDCDC;margin: 5px 5px 0px 30px;border-left-style: hidden;border-right-style: hidden;
}
.que4,.que5{border: 1px dashed #DCDCDC;margin: 5px 5px 0px 30px;border-left-style: hidden;border-right-style: hidden;border-top-style: hidden;
}
.que7{background-image: url(../images/side_bg.gif);background-position: 0% 100%;margin-top: -5px;margin-left: 0px;line-height: 33px;
}.iphone{border: 1px solid #A29D9E;border-top-style: hidden;border-left-style: hidden;border-right-style: hidden;height: 142px;width: 226px;margin-left: 14px;display: inline-block;margin-top: 10px;background-image: url(../images/side_bg.gif);background-repeat: no-repeat;overflow: hidden;background-position: 0% 0%;
}.iphone_top{font-size: 16px;height: 28px;width: 100%;line-height: 28px;margin: auto;
}.ipone_image{height: 110px;width: 100%;background-image: url(../images/tel.gif);
}/*顶部*/
#foot{width: 100%;height: 90px;margin-top: -13px;
}
.foot_top{height: 30px;width: 100%;background-color: #AFAFAF;
}
.foot_top a{text-decoration: none;line-height: 30px;text-align: center;color: white;
}
.foot_foot{font-size: 13px;color: #666666；
}span {color: red;
}.back_two {position: relative;
}css文件
转载于:https://www.cnblogs.com/xiandong/p/7610875.html
html/css静态网页制作相关推荐
- HTML+CSS静态网页制作：电影介绍(11页) HTML+CSS+JavaScript
作品演示 代码展示 代码说明:以下仅展示部分代码供参考~ <!DOCTYPE html><head><meta charset="utf-8" /&g ...
- 大学生动漫网页设计模板 机动战士高达静态网页制作成品下载 HTML漫画网页作业带JS轮播图
机动战士高达静态网页制作 应用知识点 作品介绍 首页部分代码 页面最终效果 网页源地址 应用知识点 DIV CSS布局.网页背景图.JS图片轮播.在线视频 作品介绍 机动战士高达动漫网页使用DIV C ...
- 静态网页制作教程 （转载）
方法/步骤 新建一个txt文本文档,先不要急着修改文件后缀名,有基础的朋友手动输入HTML代码,不会也没有关系,百度搜索"网页HTML代码". 代码: <!Doctype h ...
- 分析静态网页客户服务器工作过程,(静态网页制作课程标准.doc
静态网页制作课程标准 课程编码: 02345 课程类别:专业基础必修课 适用专业:计算机应用 授课系(部):电子与信息系 学分学时: 4 编写执笔人:宋昌统 教研室主任审核签字: 审核日期: 系主任审 ...
- 利用html标记制作静态网页,使用HTML制作网页《静态网页制作》.ppt
使用HTML制作网页<静态网页制作> 表单的执行原理 Internet 1 2 客户端:请求登录,通过表单填写账户信息 服务器端:验证发来的账号信息,然后给出反馈 客户端和服务器类似两人沟 ...
- HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第五章课后习题(课程介绍专栏效果)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程 第五章:"课程介绍"专栏-课后习题参考代码 题目原型: 请结合给出的素材,运用列表标记,超链接标记以 ...
- HTML+CSS+JavaScript网页制作案例教程-黑马程序员-第四章课后习题(播放器图标)
黑马程序员编著的教材 HTML+CSS+JavaScript网页制作案例教程 第四章:播放器图标-课后习题参考代码 ........ 记得 关注,收藏,评论哦,作者将持续更新.... 我自己做的效果 ...
- Javaweb实验：静态网页制作
Javaweb实验: 1.静态网页制作 目录 Javaweb实验: 前言 一.实验目的 二.实验原理 三.实验内容 四.实验步骤 五.实验结果 六.实验内容 七.实验步骤 八.实验结果 九.思考 1. ...
- HTML CSS JavaScript网页制作从入门到精通 第3版 (刘西杰) pdf完整版
HTML CSS JavaScript网页制作从入门到精通 第3版共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于Jav ...
- HTML+CSS静态网页练习案例（转动的八卦图）
HTML+CSS静态网页练习案例(转动的八卦图) 需要的知识 1.div标签的运用 2.id选择器,后代选择器, 3.简单的css样式长,宽,高,背景颜色,浮动,绝对定位,边框弧度 4.div的布局特 ...
最新文章
- 3d 自动生成物体_Adobe发布3D建模、AR内容生成应用Scantastic
- 个人项目对方代码分析（随机生成不同难度试卷）
- python123测验答案测验3_知到app数学分析3-3测验答案查询服务
- 用iostat对linux硬盘IO性能进行检测
- 移动端IOS自动化测试框架搭建-无坑
- 计算机软件需求说明编制指南gb/t 9385-2008,GBT 9385-2008 计算机软件需求说明编制指南.pdf...
- 魔兽世界插件编写-第一个插件-空插件 EmptyAddOns
- QScrollBar垂直滚动条简单样式定制
- CNN数据集——自己建立数据集要点
- 【unity3d】如何学习unity3d
- 提问的力量三：提问式思维----你是学习者还是评判者？
- 从零开始建立机械臂URDF模型
- 物联网安全知识点总结--第六章 物联网应用层安全
- 国庆中秋长假游玩攻略：来自汇智人的第一手出行避坑指南
- Matlab高光谱遥感数据处理与混合像元分解
- 饼图legend显示百分比
- excel自动排班表_巧用常见工具：怎样将图片格式数据转换成EXCEL表格
- 麦肯锡报告:到2030年机器人将取代8亿人的就业（上）
- 淘宝程序员拿几十万工资，写出来的代码到底怎么样？
- 根据身份证获取信息（性别，生日，年龄，是否正确，生肖，星座）