美文网首页
表格和CSS

表格和CSS

作者: 金厚琦 | 来源:发表于2018-10-23 19:24 被阅读0次

###表格合并

合并列
th居中
rowspan:行
colspan:列
border:边框
cellpadding,cellspacing都等于0就是实线

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table width="400"border="1px">
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>密码</td>
</tr>
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>密码</td>
</tr>
<tr>
<td>合计</td>
<td colspan="3">用户名</td>
</tr>
</table>
</body>
</html>

** 合并行**

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1"width="300">
<tr>
<td>1</td>
<td></td>
<td></td>
</tr>
<tr>
<td>2</td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr>
<td>4</td>
<td></td>

</tr>
<tr>
<td>5</td>
<td></td>

</tr>


</table>

</body>
</html>

选择器 input标签
表单

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="aaa.do">
<!--//性别，单选框-->
   <input type="radio" name="sex"/>男
   <input type="radio" name="sex"/>女<br>
<!--//爱好,复选框-->
   <input type="checkbox" name="hobby">吃串
   <input type="checkbox" name="hobby">喝酒
   <input type="checkbox" name="hobby">打豆豆<br>
<!--家乡-->
家乡： <select name="home">
   <option value="1">请选择</option>
   <option >沈阳</option>
   <option >抚顺</option>
   <option >大连</option>
   <option >丹东</option>
   </select><br>
<!--账号(文本框)-->
账号：<input type="text" name="username"/><br>
<!--&lt;!&ndash;密码（文本框）;readonly value只读-->
密码：<input type="text" name="username"/><br>
<!--确认密码-->
确认密码：<input type="text" name="username"/><br>
<!--多行文本框-->
<textarea rows="3" cols="50"></textarea><br>
<!--提交按钮-->
<input type="submit"/>
<input type="reset"/>

登录页面
</form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
Search :
<input type="search" name="search1"/><br>
请输入E-mail地址 ： <input type="email" name="user_email"/><br/>
请输入网址：<input type="email" name="user_email"/><br/>
请输入数值：<input type="number" name="number1" step="5" min="1" max="20" value="0"/><br/>
请输入电话号码：<input type="tel" name="tel1"/><br/>
请输入数值（滑动条）：<input type="range" name="range1" min="1" max="30"/><br/>
请输入颜色：<input type="colour" name="colour1"/><br/>
请输入时间：<input type="time" name="time1"/><br/>
请输入时间：<input type="time" name="time1" step="2" value="13:20:00"/><br/>
请输入日期：<input type="date" name="date1"/><br/>
请输入月份：<input type="month" name="month1"/><br/>
请输入年份和周数：<input type="week" name="week1"/><br/>
<input type="submit" value="提交"/>
<input type="file"/>
image:<input type="image" name="image1" src="../../images/1.jpg" width="200" height="200"><br />
   
</form>
</body>
</html>

外部样式表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/commom.css" type="text/css">

</head>
<body>
<p id="class">例子</p>
</body>
</html>

** 外部连接commom，创建css类**

@charset "utf-8";
#class{
color: aqua;
}

** 行内样式表 **

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>

</head>
<body>
<!--html页引入方式-->
<p style="color: blue;font-size: 20px">我是行内样式表</p>
</body>
</html>

内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#first{
color: aqua;
}
</style>
</head>
<body>
<p id="first">大声道多</p>
</body>
</html>

选择器（.为class，#为id）

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#test01{
color: blue;
}
   .test02{
color:chartreuse;
}
p{
color: red;
}
</style>
</head>
<body>
id选择器<br>
<span id="test01">one</span><br>

类选择器<br>
<span class="test02">two</span><br>
<span class="test02">two</span><br>
标签选择器<br>
<p>three</p>
</body>
</html>

例题

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul ul ul li{
color: red;
}
ul ul li{
color: salmon;
}
ul li{
color: blue;
}
ul ol li{
color: green;
}
</style>
</head>
<body>
<h1>东软睿道学习平台</h1>
欢迎来到东软睿道学习平台，这里将为您提供丰富的学习内容。
<ul>
<li>网页制作</li>
<ul>
<li>使用Dreamweaver制作网页</li>
<li>使用CSS布局和美化网页</li>
<ul>
<li>CSS初级</li>
<li>CSS中级</li>
<li>CSS高级</li>
</ul>
<li>使用JavaScript制作网页特效</li>
</ul>
<li>平面设计</li>
<ol>
<li>美术基础</li>
<li>使用Photoshop处理图形图像</li>
<li>使用Illustrator设计图形</li>
<li>制作Flash动画</li>
</ol>
</ul>

</body>
</html>

交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p.txt{
color: red;
}

</style>
</head>
<body>
<p>第一行</p>
<p class="txt">第二行，计划变色</p>
<span class="txt">第三行</span>
</body>
</html>

并集选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p,.txt,#txtid{
color: red;
}
</style>
</head>
<body>
<p>第一行</p>
<p class="txt">第二行，计划变色</p>
<span id="txtid">第三行</span>
</body>
</html>

动态伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*text-decoration 去除下划线*/
a:link{
color: red;text-decoration:none;
}
a:hover{color: chocolate}
a:visited{color: black}
a:active{color: blue}
</style>
</head>
<body>
<a href="#" target="_blank">测试伪类</a>
</body>
</html>

相关文章

  • 表格和CSS

    ###表格合并 合并列th居中rowspan:行colspan:列border:边框cellpadding,cel...

  • CSS初探16

    Head First HTML与CSS 第十一章 布局与定位 CSS——掌控页面的表现 CSS表格显示 CSS表格...

  • css样式——表格篇

    CSS 表格属性可以帮助您极大地改善表格的外观。 表格边框 如需在 CSS 中设置表格边框，请使用border属性...

  • css表格和表单

    表格:table,也可以设置布局，现已被div盒子所替代。那么大概的一个格式就是table-th-tr-td，th...

  • HTML结尾与CSS3 (No.3)

    结束课堂上的HTML部分，开始CSS部分 HTML表格和表单 一、表格table标签代表一个表格，在table标签...

  • div+css布局基础章节

    [toc] 使用CSS美化表格和表单元素 数据表格及结构 设置相应表格内容, 职责注意的属性: 让横坐标和纵坐标教...

  • CSS样式

    CSS背景 CSS字体 CSS链接 CSS 列表 CSS 表格 CSS轮廓 CSS背景 1、背景色 ba...

  • Day2:html和css

    Day2:html和css 表格是一种常用的标签,表格结构,做到能够合并单元格. 表格的属性: 如何创建表格: 表...

  • CSS学习的一部分内容

    本篇是将CSS中的表格，轮廓，定位，浮动的学习进行的总结。完全个人理解，仅供参考。（耶！！！） CSS表格 CSS...

  • HTML表格应用

    HTML表格 表格标签 表格在数据展示方面非常简单，并且表现优秀，通过与CSS的结合，可以让数据变得更加美观和整齐...

网友评论

      本文标题：表格和CSS

      本文链接：https://www.haomeiwen.com/subject/ktaazftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|表格和CSS|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！