HTML5-03
2021-07-25 07:55
标签：fan pac none 背景图 no-repeat 菜单 zixue 图片 radio 学习HTML5的第三天： 1.带样式的表格表单 2.关于一些标签的默认样式的去除 body标签自带外边距 ul标签自带上下外边距和左内边距以及列表项右边的点 a超链接标签自带文本颜色和下划线 以及一定比例的字号(这个字号好像默认是百分比) 3.关于背景图片的设置 4.例-音乐列表 (接下来是音乐列表的两个css) (首先，清除默认样式，便于之后设置) (接下来，为网页设置需要的样式) HTML5-03 标签：fan pac none 背景图 no-repeat 菜单 zixue 图片 radio 原文地址：https://www.cnblogs.com/zhangyuanmingboke/p/14956362.htmlDOCTYPE html>
html>
head>
meta charset="utf-8">
title>表格表单title>
style type="text/css">
tr {
border: none;
height: 30px;
line-height: 30px;
}
th {
border: none;
text-align: left;
/* 左对齐 */
height: 40px;
}
td,
table {
border: none;
}
caption {
border-bottom: 2px solid red;
/* 只加下边框 */
/* padding-bottom: 10px;
padding-top: 30px; */
padding: 30px 0px 10px 0px;
text-align: left;
/* 左对齐 */
}
h2 {
margin: 0;
}
.td1 {
width: 200px;
}
#tdbutton {
text-align: center;
}
#baocun,
#fanhui {
background-color: blue;
color: white;
width: 60px;
height: 30px;
border: none;
font-size: 14px;
}
style>
head>
body>
table border="" cellspacing="" cellpadding="">
caption>
h2>
个人信息
h2>
caption>
tr>
th colspan="2">修改个人信息（*为必填项）th>
tr>
tr>
td class="td1">*姓名td>
td>input type="text" name="" id="" value="" />td>
tr>
tr>
td class="td1">*性别td>
td>
input type="radio" name="sex" id="" value="1" />男
input type="radio" name="sex" id="" value="2" />女
td>
tr>
tr>
td class="td1">*出生日期td>
td>input type="date" name="" id="" value="" />td>
tr>
tr>
td class="td1">*参加工作年份td>
td>select name="">
option value="1">无工作经验option>
option value="2">2005或更早option>
option value="3">2006option>
option value="4">2007option>
select>td>
tr>
tr>
td class="td1">*户口所在地td>
td>
select name="">
option value="1">沈阳option>
option value="2">大连option>
option value="3">营口option>
select>
td>
tr>
tr>
td class="td1">*现居住城市td>
td>
select name="">
option value="1">沈阳option>
option value="2">大连option>
option value="3">营口option>
select>
td>
tr>
tr>
td class="td1">*联系方式td>
td>input type="text" name="" id="" value="" />
a href="#">修改a>
td>
tr>
tr>
td class="td1">*电子邮箱td>
td>input type="text" name="" id="" value="" />
a href="#">修改a>
td>
tr>
tr>
td class="td1">婚姻状况td>
td>
input type="radio" name="yihun" id="" value="" />未婚
input type="radio" name="yihun" id="" value="" />已婚
input type="radio" name="liyi" id="" value="" />离异
td>
tr>
tr>
td class="td1">国籍td>
td>select name="">
option value="1">中国option>
option value="2">中国option>
select>
td>
tr>
tr>
td class="td1">有无海外学习经历td>
td>
input type="radio" name="study" id="" value="" />有
input type="radio" name="study" id="" value="" />无
td>
tr>
tr>
td class="td1">政治面貌td>
td>
input type="radio" name="" id="" value="" />中共党员
input type="radio" name="" id="" value="" />共青团员
input type="radio" name="" id="" value="" />民主党派
input type="radio" name="" id="" value="" />群众
td>
tr>
tr>
td id="tdbutton" colspan="2">
input type="button" name="" id="baocun" value="保存" />
input type="button" name="" id="fanhui" value="返回" />
td>
tr>
table>
body>
html>
DOCTYPE html>
html>
head>
meta charset="utf-8" />
title>关于默认样式title>
style type="text/css">
body{
border: 1px solid blue;
margin: 0;
/* 去掉body自带的默认外边距 */
}
html{
border: 2px solid red;
}
div{
width: 100px;
height: 100px;
border: 1px solid green;
}
ul{
border: 3px solid orange;
/* 干掉上下外边距和左内边距 */
margin: 0;
padding: 0;
/* 去掉无序列表右边的点 */
list-style: none;
}
li{
border: 01px solid green;
}
a{
/* 超链接有自带的颜色和下划线和一定比例的字号 */
color: black;
text-decoration: none;
font-size: 3px;
}
style>
head>
body>
body>
html>
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>title>
style type="text/css">
div{
border: 1px solid black;
width: 200px;
height: 200px;
background-image: url(img/pic_1.jpg);
/* 选择背景图片 */
background-repeat: no-repeat;
/* 背景图片不填充 */
background-position: left top;
/* 背景图片位置 */
background-size: cover;
/* 背景图片盖满整个区域 */
}
style>
head>
body>
div id="">
div>
body>
html>
DOCTYPE html>
html>
head>
meta charset="utf-8">
title>例音乐列表title>
link rel="stylesheet" type="text/css" href="css/zixuereset.css"/>
link rel="stylesheet" type="text/css" href="css/musiclist.css"/>
head>
body>
ul>
li>
img src="img/pic_1.jpg" >
span>小水果-筷子兄弟span>
li>
li>
img src="img/pic_2.jpg" >
span>匆匆那年-王菲span>
li>
li>
img src="img/pic_3.jpg" >
span>年轮-张碧晨span>
li>
li>
img src="img/pic_4.jpg" >
span>喜欢你-G.E.M.邓紫棋span>
li>
li>
img src="img/pic_5.jpg" >
span>老男孩-筷子兄弟span>
li>
ul>
body>
html>
/* 用并集选择器 */
html,body,h1,h2,h3,h4,h5,h6,ul,ol,li,p,span{
/* 去掉默认的外边距 */
margin: 0;
/* 去掉默认的内边距 */
padding: 0;
/* 去掉所有标签的默认字号，统一设定为12px */
font-size: 12px;
}
ul{
list-style: none;
}
a{
/* 超级链接默认颜色为蓝色，文字颜色需要单独设置 */
color: black;
/* 去掉超级链接默认的下划线 */
text-decoration: none;
/* 改变超级链接的默认字号 */
font-size: 12px;
}
span{
font-size: 16px;
}
img{
vertical-align: middle;
/* 对齐方式：把此元素放置在父元素的中部。*/
/* 让span中文字与图片中心位置对齐 */
}
li{
border-bottom: 2px solid #000000;
/* 设置下边框 */
height: 100px;
width: 600px;
line-height: 95px;
/* 调节高度,尽量居中 */
background-image: url(../img/download.gif);
/* 设置背景图片 */
background-repeat: no-repeat ;
/* 设置背景图片填充样式为不填充 */
background-position: right;
/* 设置背景图片右中对齐 */
}
ul{
width: 530px;
margin: 4px 0px 0px 8px;
}
上一篇：快照劫持的原理与JS跳转的分析
下一篇：C#处理Json字符串实例分析