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 ...
随机推荐
- 什么是阿里云CDN
阿里云内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络.阿里云CDN分担源站压力,避免网络拥塞, ...
- LeetCode-第 166 场周赛
LeetCode-第 166 场周赛 1281.subtract-the-product-and-sum-of-digits-of-an-integer 1282.group-the-people-g ...
- TeX教程
转自 [抢工作向]一个更适合玩物理的同学的论坛TeX教程 1. 基础知识 如何在你的帖子里插入一个\(\TeX\)环境来写公式呢?答案其实很简单,对于不同的要求,我们有两种方法. 第一种只需要在\(\ ...
- 【AtCoder】ARC059
为啥这场ARC那么水--一个点就切完了 ARC059 C - いっしょ / Be Together 枚举就行 #include <bits/stdc++.h> #define fi fir ...
- HDU 3642 求体积交集
Get The Treasury 题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=3642 Problem Description Jack knows ...
- python 入门（基础）
1. python的常见数据类型(str , list ,dict,set) str (字符串的操作方法) astr = " Hello Workd " astr.strip() ...
- 微信小程序 基本介绍及组件
创建项目 微信开发工具深入介绍 https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 基本项目目录 1. 配置 ...
- python3.5+installer 将.py 打包成.exe
(1)下载安装installer,不如我安装在D:\Program Files\Python35,安装完成后,在D:\Program Files\Python35\Scripts可以找到install ...
- 让 history 命令显示日期和时间
echo 'HISTTIMEFORMAT="%F %T "' >> /etc/profile source /etc/profile
- android 一个SQLite数据库多个数据表的基本使用框架 （带demo）
android 一个SQLite数据库多个数据表(带demo) 前言 demo演示 一.搭建 二.建立实体类 三.建立数据库操作类 ...