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 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- SQL SERVER 2012安装配置说明(多图详解)
1. 优先安装软件 1. net framework3.5. 2. 在安装SQL SERVER 2012前需要3.5的支持.在WIN 2012系统可以在系统管理的添加角色和功能中安装,如下将[.NET ...
- Codeforces 708D 上下界费用流
给你一个网络流的图 图中可能会有流量不平衡和流量>容量的情况存在 每调整一单位的流量/容量 需要一个单位的花费 问最少需要多少花费使得原图调整为正确(可行)的网络流 设当前边信息为(u,v,f, ...
- ELK是什么？
ELK = ElasticSearch + Logstash + Kibana Elasticsearch:后台分布式存储以及全文检索 Logstash : 日志加工.“搬运工” Kibana : ...
- C#基础进阶
观看C#高级教程进行学习.巩固基础,进阶学习. 1.委托 把方法当做参数来传递就是委托.委托的关键字是delegate. class Program { private delegate string ...
- qt5--QLabel标签控件
需要 #include <QLabel> label->setFrameShape(QFrame::Box); //设置边框 边框样式参看:https://www.cnblo ...
- JavaScript基础——JavaScript函数(笔记)
avaScript 函数(笔记) JavaScript 是函数式编程语言,在JavaScript脚本中可以随处看到函数,函数构成了JavaScript源代码的主体. 一.定义函数 定义函数的方法有两种 ...
- Machine Learn in Action(K-近邻算法)
使用K-近邻算法将某点[0.6, 0.6]划分到某个类(A, B)中. from numpy import * import operator def classify0(inX, dataSet, ...
- linux运维、架构之路-K8s滚动更新及回滚
一.滚动更新 应用程序一次只更新一小部分副本,更新成功后,再更新更多的副本,最终完成所有副本的更新. 滚动更新的优点:零停机,整个更新过程始终有副本在运行,从而保证了业务的连续性. 1. ...
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
百度云盘 传送门 密码:xftr 满天星星闪烁动画效果: (可用星空动画来作为页面背景,白色文字改为文章或者其他的O(∩_∩)O) <!doctype html> <html> ...
- 如何将JS中object转换为字符串
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象 var last=obj.toJSONString(); //将JSON对象转化为JSON字符 或者 va ...