02 CSS和DIV对界面优化
01 网站首页的优化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网站首页</title>
<style>
#bodyDiv{
border: 1px solid blue;
width: 90%px;
}
.logoDiv{
border: 1px solid blue;
width: 33%;
float: left;
height: 50px;
}
.clear{
clear: both;
}
#menuDiv{
width: 100%;
height: 50px;
border: 1px solid blue;
background-color: black;
} #imgDiv{
width: 100%;
border: 1px solid blue;
} .productClass{
width: 100%;
border: 1px solid blue;
}
.contentClass{
width: 100%;
border: 1px solid blue;
}
.contentClass font{
font-size: 30px;
color: black;
} #menuDiv a{
font-size: 20px;
color: white;
}
<!--找到id为menuDiv中的 a元素,不知道为什么这个注释总有问题-->
</style>
</head>
<body>
<!--整体的DIV-->
<div id="bodyDiv">
<!--首行分为三个小块-->
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="48"/>
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="48" />
</div>
<div class="logoDiv">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
<!--第二行的div-->
<div id="menuDiv">
<a href="">首页</a>
<a href="">电脑办公</a>
<a href="">手机数码</a>
<a href="">烟酒糖茶</a>
</div>
<!--第三行，滚动的图片-->
<div id="imgDiv">
<img src="../01静态界面/img/1.jpg" width="100%" />
</div>
<!--第四行，热门商品的Div-->
<div class="productClass">
<!--文字部分的Div-->
<div class="contentClass">
<font>热门商品</font>
<img src="../01静态界面/img/title2.jpg" />
</div>
<!--商品展示图片部分Div-->
<div style="width: 100%;border: 1px solid blue;">
<div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
<img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
<div>
<div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
<img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
<div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
</div>
</div>
</div> <!--广告的Div-->
<div style="width: 100%;border: 1px solid blue;">
<img src="../01静态界面/img/ad.jpg" width="100%" height="80" />
</div>
<!--最新商品的Div-->
<div class="productClass">
<!--文字部分的Div-->
<div class="contentClass">
<font>最新商品</font>
<img src="../01静态界面/img/title2.jpg" />
</div>
<!--商品展示图片部分Div-->
<div style="width: 100%;border: 1px solid blue;">
<div style="width: 15%;height: 460px;border: 1px solid blue;float: left;">
<img src="../01静态界面/img/big01.jpg" width="100%" height="100%"/>
</div>
<div style="width: 84%;height: 460px;border: 1px solid blue;float: left;">
<div>
<div style="border: 1px solid blue;width: 48%;float: left;height: 228px;">
<img src="../01静态界面/img/middle01.jpg"width="100%" height="100%" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
<div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
<div style="border: 1px solid blue;width: 16%;float: left;height: 228px;">
<img src="../01静态界面/img/small03.jpg" />
</div>
</div>
</div>
</div>
</div> <!--页脚的Div-->
<div style="width: 100%;border: 1px solid blue;">
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div> <!--友情链接的Div-->
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
02 注册界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style>
div{
border: 1px solid blue;
}
.bodyDiv{
width:90%;
} .bodyDiv > div{
width: 100%;
} .logoDiv{
width: 33%;
height: 50px;
float: left;
} .clear{
clear: both;
} ul li{
display: inline;
}
</style>
</head>
<body>
<!--整体的div-->
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="../01静态界面/img/logo2.png" height="50" />
</div>
<div class="logoDiv">
<img src="../01静态界面/img/header.png" height="50"/>
</div>
<div class="logoDiv" style="margin-top: 0px;padding-top: 10px;height: 40px;">
<a href="">登录</a>
<a href="">注册</a>
<a href="">购物车</a>
</div>
<div class="clear"></div>
</div>
</div>
<div style="height: 50px;background-color: black;">
<ul>
<li>首页</li>
<li>首页</li>
<li>首页</li>
<li>首页</li>
</ul>
</div>
<div style="height: 500px;background-image: url(../01静态界面/img/regist_bg.jpg);">
<div style="border:5px solid gray;background-color: white;position: absolute; left: 400px;top: 160px;width: 600px;">
<form>
<table border="0" width="100%" cellspacing="10">
<tr>
<td>用户名</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repassword"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男">男
<input type="radio" name="sex" value="女">女
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="province">
<option>--请选择--</option>
</select>
<select name="city">
<option>--请选择--</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<input type="checkbox" name="hobby" value="羽毛球">羽毛球
</td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" name="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="注册" /> </td>
</tr>
</table>
</form>
</div>
</div>
<!--最下面的两行-->
<div>
<img src="../01静态界面/img/footer.jpg" width="100%" />
</div>
<div>
<center>
联系我们 招贤纳士 法律声明<br />
Copyright © 2005-2016 传智商城 版权所有
</center>
</div>
</body>
</html>
02 CSS和DIV对界面优化的更多相关文章
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- JavaWEB开发02——CSS&JS
今日目标 使用CSS完成网站首页的优化 使用CSS完成网站注册页面的优化 使用JS完成简单的数据校验 使用JS完成图片轮播效果 教学目标: 了解CSS的概念 了解CSS的引入方式 了解CSS的基本用法 ...
- css写作建议和性能优化小结
1.前言 还有几天就到国庆中秋了,快要放假了,先祝大家节日快乐!之前写过js的写作建议和技巧,那么今天就来聊聊css吧!说到css,每一个网页都离不开css,但是对于css,很多开发者的想法就是,cs ...
- 02 CSS块级元素和行内元素
02 CSS块级元素和行内元素 划分依据:根据标签内部可以存放的元素内容不同进行划分,它与CSS样式无关. 要先了解这个 得先了解 什么是容器级别的标签和文本级? 容器级标签 什么是容器级标签? 内部 ...
- CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
- css实现div的高度填满剩余空间
css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...
- html中css、div命名规范
html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...
- CSS实现Div透明，而显示在上面的文字不透明，但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
- CSS实现div居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- AtCoder AISing Programming Contest 2019 Task D. Nearest Card Game
题目分析在代码注释里. int main() { #if defined LOCAL && !defined DUIPAI ifstream in("main.in" ...
- 二维状压DP经典题
炮兵阵地 题目链接 题目大意:在n*m的地图上放置炮兵,每个炮兵的攻击范围是上下左右两格内,有两种不同的地形,山地(用"H" 表示),平原(用"P"表示),只有 ...
- ffmpeg解码音视频过程(附代码)
0. 引言 最近一直在使用和学习ffmpeg. 工作中需要拉流解码, 获取音频和视频数据. 这些都是使用ffmpeg处理. 因为对ffmpeg接触不多, 用的不深, 在使用的过程中经常遇到不太懂的地方 ...
- PHP max_input_var设为了1000导致post数组太多时无法接受后面的参数值
PHP max_input_var设为了1000导致post数组太多时无法接受后面的参数值 下午突然接到格力电话说无法批量设置门店任务,但是在测试环境下无法重现,测试环境下好好的. 然后登陆到生产环境 ...
- 【Trie】L 语言
[题目链接]: https://loj.ac/problem/10053 [题意]: 给出n个模式串.请问文本串是由多少个模式串组成的. [题解]: 当我学完AC自动机后,发现这个题目也太简单了吧. ...
- MySQL Select语句的执行顺序
源文章:How is a query executed in MySQL? 当执行SQL的Select查询语句时,SQL指令的执行顺序如下: FROM 子句 WHERE 子句 GROUP BY 子句 ...
- MySQL 官方样板数据库sakila
Sakila示例数据库最初由MySQL AB文档团队的前成员Mike Hillyer开发,旨在提供可用于书籍,教程,文章,样本等示例的标准模式. Sakila示例数据库还用于突出MySQL的最新功能, ...
- 怎样理解AJAX
AJAX: Asynchronous JavaScript and XML, 翻译过来就是: 异步的JavaScript与XML 这已经成为了一个通用名词, 字面意义已经消失了, 因为现在使用Java ...
- PM2 部署 nodejs API项目
PM2的主要特性: 内建负载均衡(使用Node cluster 集群模块) 后台运行 0秒停机重载,我理解大概意思是维护升级的时候不需要停机. 具有Ubuntu和CentOS 的启动脚本 停止不稳定的 ...
- selenium无头浏览器&规避操作
一.无头浏览器概述: 无头浏览器主要目的是打开浏览器但用户看不到 简单用法如下: from selenium import webdriver from time import sleep from ...