HTML CSS 贵美商城网页布局
2024-05-26 00:41:57
HTML CSS 贵美商城网页布局
文章目录
- HTML CSS 贵美商城网页布局
- 效果图
- 结果图
- 代码
材料：链接： https://pan.baidu.com/s/13wK9ZvSAQ7lLkhYwFGUXdg 提取码：f5it
然后将素材放入img
效果图
结果图
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>欢迎来到 贵美商城</title><style>#mid{position: absolute;left: 30px;top: 150px; }#topline{list-style: none;position: absolute; top: 0px;left: 525px;font-weight: 500; }#topline li{display: inline; /*水平*/margin: 10px; /*间距*/}#secondLine{list-style: none; /*去除点*/position: absolute; top: 95px;left: 0px;}#secondLine li{display: inline; /*水平*/margin: 10px;text-align: center;font-weight: 600;}#gwc{position: absolute; top: 17px;left: 550px;}#bzzx{position: absolute; top: 18px;left: 625px;}#jrsc{position: absolute; top: 18px;left: 715px;}#swzy{position: absolute; top: 17px;left: 805px;}#dl{position: absolute; top: 18px;left: 892px;}#zc{position: absolute; top: 18px;left: 950px;}#mxzq{position: absolute; top: 155px;left: 243px;}#left{list-style: none;line-height: 147px; /*行高*/position: absolute; top: 114px;left: 50px;text-align: center;color: orange;font-weight: 900;}#jydq{position: absolute; top: 212px;left: 39px;}#sj{position: absolute; top: 360px;left: 39px;}#sjsm{position: absolute; top: 505px;left: 39px;}#rybh{position: absolute; top: 660px;left: 39px;}#fkqg{position: absolute; top: 420px;left: 250px;text-align: center;font-size: small;}#fkqg img{}#fk1{position: absolute; top: 400px;left: 300px;}#fk2{position: absolute; top: 400px;left: 470px;}#fk3{position: absolute; top: 400px;left: 640px;}#fk4{position: absolute; top: 510px;left: 300px;}#fk5{position: absolute; top: 510px;left: 470px;}#fk6{position: absolute; top: 510px;left: 640px;}#fk7{position: absolute; top: 660px;left: 300px;}#fk8{position: absolute; top: 660px;left: 470px;}#fk9{position: absolute; top: 660px;left: 640px;}#right{position: absolute; top: 300px;left: 800px;line-height: 60px;list-style: none;}#r1{position: absolute; top: 335px;left: 780px;}#r2{position: absolute; top: 395px;left: 780px;}#r3{position: absolute; top: 455px;left: 780px;}#r4{position: absolute; top: 515px;left: 780px;}</style></head><body> <div id="header"><img src="img/h_bg.jpg" /><ul id="topline"><li>购物车</li><li>帮助中心</li><li>加入收藏</li><li>设为主页</li><li>登陆</li><li>注册</li></ul><ul id="secondLine"><li> 首页 </li><li>家用电器</li><li>手机数码</li><li>日用百货</li><li> 书籍 </li><li>帮助中心</li><li>免费开店</li><li>全球资讯</li></ul><img id="gwc" src="img/xiazai3.png"/><img id="bzzx"src="img/bangzhuzhongxin.png"/><img id="jrsc"src="img/jiarushoucang.png" /><img id="swzy"src="img/zhuye.png" /><img id="dl" src="img/denglu.png"/><img id="zc" src="img/zhuce.png"/> </div><div id="section"><img src="img/bg.gif" id="mid"/><img id="mxzq" src="img/adv_2.jpg" /><ul id="left"><li>家用电器</li><li>书籍</li><li>手机数码</li><li>日用百货</li></ul><table id="jydq" width="190px" height="100px"><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr></table><table id="sj" width="190px" height="90px"><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr></table><table id="sjsm" width="190px" height="90px"><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr></table><table id="rybh" width="190px" height="100px"><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr><tr><td>大家电</td><td>大家电</td><td>大家电</td></tr></table><table id="fkqg" width="510px" height="420px"><tr><td>惠普商务移动应用英寸笔记本</td><td>夏新N6 GPS真人语音导航手机 超低特价疯抢 数量有限！</td><td>三星家庭影院 HT-TZ325 购机送好礼（超值性价比）</td></tr><tr><td>明基MP512投影机 2899元 送100元京券 SVGA 2200流明</td><td>罗技数据1TB移动鼠标729元开抢了！</td><td>海森那尔极品耳机绝对不容错过</td></tr><tr><td>亚马逊随时阅读，随时记录，时尚最佳选择！</td><td>优雅相框</td><td>IBM 2009最新上网本，特色尽显</td></tr></table><img id="fk1"src="img/promote-1.jpg" border="1"/><img id="fk2"src="img/promote-2.jpg" border="1" /><img id="fk3"src="img/promote-3.jpg" border="1" /><img id="fk4"src="img/laser-pen.jpg" border="1" /><img id="fk5"src="img/mouse.jpg" border="1" /><img id="fk6"src="img/earphone.jpg" border="1" /><img id="fk7"src="img/notebook.jpg" border="1" /><img id="fk8"src="img/Frame.jpg" border="1" /><img id="fk9"src="img/Wancom.jpg" border="1" /><ul id="right"><li>大牌狂降价，三折直送</li><li>大学要求老师开网店</li><li>黑眼圈推荐，美白不停</li><li>瘦身狂潮，修形之选</li></ul><img id="r1"src="img/show1.jpg" border="1"/><img id="r2"src="img/show2.jpg" border="1"/><img id="r3"src="img/show5.jpg" border="1"/><img id="r4"src="img/show4.jpg" border="1"/></div></body>
</html>
HTML CSS 贵美商城网页布局相关推荐
- HTML总结（贵美商城项目）
HTML总结(贵美商城项目) 时隔一年多,终于又上手了一次Html项目,最大的感觉就是如果让自己来写一个项目的话,自己可以搞定! 这次完成这个项目大概用了七天.这次完成的这个项目也是检验一下了自己,很 ...
- 黑客内参告诉你一个：设计师用div+css 必须知道的网页布局类型
今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...
- 【CSS】盒子边框 ① ( 网页布局本质 | 盒子模型 | 盒子边框 Border | border-width 宽度 | border-style 边框样式 | 边框颜色 | 边框设置综合写法 )
文章目录 一.网页布局本质 二.盒子模型 三.盒子边框 Border 1.CSS 2.0 文档查询 2.边框设置语法 3.边框设置综合写法 一.网页布局本质 构建一个网页 , 首先 , 创建盒子模型 ...
- 使用CSS进行简单的网页布局
Web页面是由块元素组成的,正常情况下块元素一个个按垂直方向排布,构成了页面.但是这种基本的布局方式绝大多时候不能满足我们的需求,所以各种布局方式应运而生,所以,本文来介绍最简单的几种网页布局方法. ...
- Web前端：实现在一块区域（div）点击链接，在同一页面的指定区域显示链接的内容——基于css与div结合网页布局设计
1:效果: 初始: 点击首页: 点击个人主页 : 点击其他类似: 2:代码 (这里我只提供css文件和核心代码,链接内容不提供) 核心代码 <!DOCTYPE html> <html ...
- 用html和css布局如下图像,[看书][CSS精粹（第2版）]第三章 CSS和图像 HTML网页布局...
**"本作品是用html和css如何实现制作一个网页呢"** 那么大家打开此文档可能是为了看看,或者是这次的考试怎么可以学习一下放心大家可以在此处得到一个好的答案... 1.介绍如 ...
- DIV+CSS最常用的网页布局代码11例。
转载自品略图书馆 http://www.pinlue.com/article/2019/03/2104/598296899335.html div css布局不同于table布局,它主要是按列来计算, ...
- html css建站的文件夹,建站教程CMS建站DIV+CSS常用的Html网页布局代码汇集
CSS: 以下是引用片段: #wrap{ width:100%; height:auto;} #column{ float:left; width:60%;} #column1{ float:left ...
- HTML+CSS+JS宠物商城网页设计期末课程大作业 web前端开发技术 web课程设计 网页规划与设计
最新文章
- Springboot项目因为kackson版本问题启动报错解决方案
- Ubuntu14.04安装apt-get方法Lnmp环境
- python中 for ... else ... 的用法
- linux设置套接字缓冲区的大小
- [收藏] Opera鼠标手势命令
- 【Python CheckiO 题解】Striped Words
- JavaScript的数据结构与算法（三） —— 单向链表
- pytorch错误解决 | 错误‘Widget Javascript not detected. It may not be installed or enabled properly.‘
- 10个css动画,10个精妙的CSS和Javascript动画Logo的示例(上)
- 多线程之间通讯JDK1.5-Lock
- Hibernate基础及配置
- Linux进程突然挂死,小玩意：如何让linux上挂死的进程重启？
- Ubuntu 16.04 升级到内核4.18 后 vmplayer 不能运行
- oracle asm 加盘,ASM添加磁盘最佳实践
- ununtu18.0安装搜狗输入法
- 转载[UGUI]深入理解Canvas Scaler
- 磁盘空间清理·微信文件夹
- STM32学习笔记---OLED页寻址方式
- 数据结构（一）——数据结构简介
- 神经系统体格检查概要