Web02_HTML&CSS
HTML
表单标签属性介绍
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>表单标签属性介绍</title>
</head> <body>
<form action="#" method="get">
隐藏标签：<input type="hidden" name="id" value="" /><br /> 用户名：
<input type="text" name="username" vplaceholder="请输入用户名" required="required" /><br /> 密码：
<input type="password" name="password" required="required" /><br /> 确认密码：
<input type="password" name="repassword" required="required" /><br /> 性别：
<input type="radio" name="sex" value="男" checked="" />男
<input type="radio" name="sex" value="女" />女<br /> 爱好：
<input type="checkbox" name="hobby" value="钓鱼" />钓鱼
<input type="checkbox" name="hobby" value="打飞机" />打飞机
<input type="checkbox" name="hobby" value="写代码" checked="checked" />写代码<br /> 头像：
<input type="file" name="file" /><br /> 籍贯：
<select name="province">
<option>--请选择--</option>
<option value="北京">北京</option>
<option value="上海" selected="selected">上海</option>
<option value="广州">广州</option>
</select><br /> 自我介绍：
<textarea name="self"></textarea><br /> 提交按钮：
<input type="submit" value="注册" /><br /> 重置按钮：
<input type="reset" /><br />
</form>
</body> </html>
HTML
div演示效果
div是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。
span是一个html标签，一个内联元素（显示一行）。它单独使用没有任何意义，必须结合CSS来使用它主要用于对括起来的内容进行样式的修饰。
使用DIV+CSS完成首页重新布局.html
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>首页</title>
<style>
#father {
border: 1px solid red;
width: 1300px;
height: 2100px;
margin: auto;
} #logo {
border: 1px solid red;
width: 1300px;
height: 50px;
} .top {
border: 1px solid blue;
width: 431px;
height: 50px;
float: left;
} #top {
padding-top: 12px;
height: 50px;
} #menu {
border: 1px solid red;
width: 1300px;
height: 50px;
background-color: orange;
} ul li {
display: inline;
color: white;
} #clear {
clear: both;
} #product {
border: 1px solid red;
width: 1300px;
height: 1000px;
} #product_top {
border: 1px solid blue;
width: 100%;
height: 45px;
padding-top: 8px;
} #product_bottom {
border: 1px solid green;
width: 100%;
height: 500px;
} #product_bottom_left {
border: 1px solid red;
width: 200px;
height: 500px;
float: left;
} #product_bottom_right {
border: 1px solid blue;
width: 1094px;
height: 500px;
float: left;
} #big {
border: 1px solid red;
width: 544px;
height: 248px;
float: left;
} .small {
border: 1px solid blue;
width: 180px;
height: 248px;
float: left;
/*让里面的内容居中*/
text-align: center;
} #bottom {
text-align: center;
}
</style>
</head> <body>
<div id="father"> <!--1.logo部分-->
<div id="logo">
<div class="top">
<img src="../../img/微信截图_20170716005056.png" height="46px" />
</div>
<div class="top">
<img src="../../img/微信截图_20170716005056.png" height="46px" />
</div>
<div class="top" id="top">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</div>
</div>
<div id="clear"> </div> <!--2.导航栏部分-->
<div id="menu">
<ul>
<a href="#">
<li style="font-size: 20px;">全部产品及服务 </li>
</a>
<a href="#">
<li>首页</li>
</a>
<a href="#">
<li>手机</li>
</a>
<a href="#">
<li>宽带光纤</li>
</a>
<a href="#">
<li>老用户</li>
</a>
<a href="#">
<li>省钱</li>
</a>
<a href="#">
<li>自助服务</li>
</a>
</ul>
</div> <!--3.轮播图-->
<div id="">
<img src="../../img/微信截图_20170716005056.png" width="100%" />
</div> <!--4.最新商品-->
<div id="product">
<div id="product_top">
<span style="font-size: 25px;padding-top: 8px;">最新商品</span>
<img src="../../img/微信截图_20170716005056.png" />
</div>
<div id="product_bottom">
<div id="product_bottom_left">
<img src="../../img/微信截图_20170716005056.png" width="100%" height="100%" />
</div>
<div id="product_bottom_right">
<div id="big">
<a href="#"><img src="../../img/微信截图_20170716005056.png" width="100%" height="100%"></a>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
<div class="small">
<img src="../../img/微信截图_20170716005056.png">
<a href="#">
<p style="color: gray;">4G纯流量云卡</p>
</a>
<p style="color: red;">免费送2G流量</p>
<p style="color: red;">￥20</p>
</div>
</div>
</div>
</div> <!--5.广告图片-->
<div id="">
<img src="../../img/微信截图_20170716005056.png" width="100%" />
</div> <!--6.友情链接和版权信息-->
<div id="bottom">
<a href="#">关于我们</a>
<a href="#">电信公告</a>
<a href="#">网站导航</a>
<a href="#">掌上营业厅</a>
</div>
</div>
</body> </html>
Web02_HTML&CSS的更多相关文章
- 【javaweb学习笔记】WEB02_HTML&CSS
一.表单相关知识 1.表单: 所有需要提交到服务器端的表单项必须使用<form></form>括起来 form标签属性(有两个): 1)action,整个表单提交的位置(可以是 ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 【使用DIV+CSS重写网站首页案例】步骤分析与代码实现
使用DIV+CSS重写网站首页案例 步骤分析: 第一步:先定义一个大的 div(整个页面),然后嵌套 8 个小的 div(共八行): 第二步:(第一行)在第一个 div 里面嵌套 3 个小的 div: ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- k8sDeployment控制器
简写为deploy,是k8s控制器的另一种实现,它构建于ReplicaSet之上,可为pod和rs资源提供声明式更新. deploy控制器资源的大部分功能均可通过调用rs来实现,同时,还增添了部分特性 ...
- IPC 进程间通信方式——管道
进程间通信概述 数据传输:一个进程需要将它的数据发送给另一个进程,发送的数据量在一个字节到几兆字节之间 共享数据:多个进程想要操作共享数据,一个进程对共享数据的修改,别的进程应该立刻看到. 通知时间: ...
- Python的语句---钱中平
python中的两种语句:1.if条件控制语句 格式: if: a = int(input("请输入第一个数:"))b = int(input("请输入第二个数:&quo ...
- 【leetcode】Department Top Three Salaries
The Employee table holds all employees. Every employee has an Id, and there is also a column for the ...
- Tomcat非root身份运行制作Linux系统服务管理
理论知识怱略,马上开始实战 一.首先准备好tomcat 启动.关闭.重启Shell脚本: 以下Shell脚本主要修改值 tomcatPath:tomcat目录 runUser:以哪个身份运行 此处测试 ...
- C++ - extern “C”含义深层探索
C和C++函数的相互引用原文地址:http://blog.csdn.net/wfwd/archive/2006/05/30/763734.aspx=========================== ...
- Markdown 标记语言指北 - 源码
这是上一篇博客的源代码. 这是班刊约稿的一篇文章. 全文约6000字, 预计需要 60 分钟读完. # Markdown 标记语言指北 #### TOC 1. [什么是 Markdown?](#%E4 ...
- Gene co-expression analysis for functional classification and gene–disease predictions
- fiddler(二)、配置抓取https协议
打开fiddler,用火狐或者谷歌浏览器访问https协议的网页,如:https://www.baidu.com/,会报不安全的连接错误 这时就需要我们做一些配置,才能抓取https协议的网页. 首先 ...
- CTS2019&APIO2019爆炸记
三天一道题都不会做,喜提双Cu,我是不是没救了.. 不知道哪天会把这篇游记补上..