HTML_Css_张龙篇

el/2024/2/26 0:02:54
css.css文件:

/*p元素用class='right' 靠右对齐 p元素用class='center' 局中对齐*/
p.right {text-align: right}
p.center {text-align: center}

/*对所有的p只用left对齐**/
p {text-align: left}

/*所有的h1-h6:用蓝色样式*/
h1,h2,h3,h4,h5,h6 { color: blue }

/*页面中所有class=center都用上*/
.center {text-align: center; color:red}

<html>
<head>
<title>这是网页的标题</title>
<!-- 引入外部样式表 在head标签内使用link标签 可以用相对路径也可用绝对路径 -->
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<h1 class="center">这是网页显示的内容</h1>
<h3 >这是网页显示的内容</h3>
<hr>
<p class="center">class="center" </p>
<p class="right"> class="right"</p>
<p> 没加class的</p>

<a href="http://www.baidu.com">这是一个链接</a><br><br>
<!--
table:表格
属性值:用单引号或者双引号都可以。
border:宽度
align:居中
width:占80%

-->
<table border="1" align="center" width="80%">
<tr>
<!--th:表示表头的信息,默认:加粗、局中 -->
<th>
aa
</th>
<th>
bb
</th>
<th>
cc
</th>
</tr>
<tr>
<td align="center">
dd
</td>
<!-- td:默认不局中 用 align="center"和 b实现th效果 -->
<td align="center">
<!-- b标签:加粗 -->
<b>ee</b>
</td>
<td align="center">
<b>ff</b>
</td>
</tr>
</table>

<!-- 表单:提交服务器要嵌套在表单form里 -->
<form>
用户名:<input type="text" value="hello world"><br>
<!-- 换行只能用br. 源代码中敲空格/换行无效 -->
密码:<input type="password"><br>
<!-- checkbox:复选框,可以选中多个 -->
兴趣:学习<input type="checkbox">
旅游<input type="checkbox">
睡觉<input type="checkbox"><br>
<!-- radio:单选按钮 name值必须一致,标识同一个组,同一个组只能单选.
name不一直还是可以多选
-->
性别:男<input type="radio" name="gender">
女<input type="radio" name="gender"><br>

<!-- select:下拉表单 只能选取其中一个-->
学历:
<select>
<!-- 下拉的每一个选项就是一个option -->
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option>小学2</option>
<option>初中2</option>
<option>高中2</option>
<option>大学2</option>
</select><br>

评论:
<!-- textarea:输入域 cols:长度 rows:宽度-->
<textarea cols="20" rows="5"></textarea><br>
图片:
<img src="http://www.google.com.hk/logos/2011/holiday11-hp.png"><br>

文件上传:
<input type="file"><br>
<input type="submit" value="submit">
<!-- 一个  表示一个空格 -->
   
<input type="reset" value="reset">
   
<input type="button" value="button" onclick="javascript:alert('hello world');">
</form>
</body>

<!--
WebKit:标准的内核,非微软,速度快(不是指打开速度快是html解析速度快)
Trident:非标准,微软的,网银都是用的这种.
现在出现的双核浏览器:指同时包含这两种内核的浏览器
IE9:开始向标准靠拢了,IE6:与标准偏差很大的
-->

</html>

<html>
<head>
<title>这是网页的标题</title>
<!-- 内嵌样式表 -->
<style type="text/css">
.center{text-align:center;color:red}
.right{text-align:right;color:blue}
</style>
</head>
<body>
<h1 class="center">这是网页显示的内容</h1>
<hr>
<p class="center">class="center" </p>
<p class="right"> class="right"</p>
<p> 没加class的</p>

</html>

<html>
<head>
<title>这是网页的标题</title>
</head>
<body>
<!-- 行内样式 -->
<!-- 总共3中使用方法 -->
<!-- 内部样式覆盖外部样式. 行内样式->内部样式->外部样式 -->
<!-- 距离左右20px,红色 -->
<h1 style="color:blue;margin-left:20px;text-align:center">这是网页显示的内容</h1>
</html>


<html>
<head>
<title>这是网页的标题</title>
<style type="text/css">
<!-- 第四种方法:导入. 一般就用3种 导入方式很少用-->
@import css.css;
</style>
</head>
<body>
<h1 class="center">这是网页显示的内容</h1>
<h3 >这是网页显示的内容</h3>
<hr>
<p class="center">class="center" </p>
<p class="right"> class="right"</p>
<p> 没加class的</p>

<a href="http://www.baidu.com">这是一个链接</a><br><br>
<!--
table:表格
属性值:用单引号或者双引号都可以。
border:宽度
align:居中
width:占80%

-->
<table border="1" align="center" width="80%">
<tr>
<!--th:表示表头的信息,默认:加粗、局中 -->
<th>
aa
</th>
<th>
bb
</th>
<th>
cc
</th>
</tr>
<tr>
<td align="center">
dd
</td>
<!-- td:默认不局中 用 align="center"和 b实现th效果 -->
<td align="center">
<!-- b标签:加粗 -->
<b>ee</b>
</td>
<td align="center">
<b>ff</b>
</td>
</tr>
</table>

<!-- 表单:提交服务器要嵌套在表单form里 -->
<form>
用户名:<input type="text" value="hello world"><br>
<!-- 换行只能用br. 源代码中敲空格/换行无效 -->
密码:<input type="password"><br>
<!-- checkbox:复选框,可以选中多个 -->
兴趣:学习<input type="checkbox">
旅游<input type="checkbox">
睡觉<input type="checkbox"><br>
<!-- radio:单选按钮 name值必须一致,标识同一个组,同一个组只能单选.
name不一直还是可以多选
-->
性别:男<input type="radio" name="gender">
女<input type="radio" name="gender"><br>

<!-- select:下拉表单 只能选取其中一个-->
学历:
<select>
<!-- 下拉的每一个选项就是一个option -->
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option>小学2</option>
<option>初中2</option>
<option>高中2</option>
<option>大学2</option>
</select><br>

评论:
<!-- textarea:输入域 cols:长度 rows:宽度-->
<textarea cols="20" rows="5"></textarea><br>
图片:
<img src="http://www.google.com.hk/logos/2011/holiday11-hp.png"><br>

文件上传:
<input type="file"><br>
<input type="submit" value="submit">
<!-- 一个  表示一个空格 -->
   
<input type="reset" value="reset">
   
<input type="button" value="button" onclick="javascript:alert('hello world');">
</form>
</body>

<!--
WebKit:标准的内核,非微软,速度快(不是指打开速度快是html解析速度快)
Trident:非标准,微软的,网银都是用的这种.
现在出现的双核浏览器:指同时包含这两种内核的浏览器
IE9:开始向标准靠拢了,IE6:与标准偏差很大的
-->

</html>



lab1.css文件:


/*body元素:背景红色*/
body{background-color: red}

/*h1:字体36pt*/
h1{font-size: 36pt}

/*h2:蓝色*/
h2{color: blue}

/*p:距离左右50px*/
p {margin-left: 100px}


<html>
<head>
<!-- 外部样式表 -->
<link rel="stylesheet" type="text/css" href="lab1.css">
</head>
<body>
<h1>hello world</h1>
<h2>welcome to shengsiyuan</h2>
<p>zhangsan lisi wangwu</p>
</body>
</html>


lab2.css
/*body:背景:白色*/
body {background-color: white}

/*h1 绿色 字体:20pt*/
h1 {color:green; font-size: 20pt}

/*hr:红色*/
hr {color:red}

/*p:字体11pt,距离左右15px*/
p {font-size: 20pt; margin-left: 15px;color:red}

/*鼠标没放上去*/
a:link {color:green}

/*访问过了*/
a:visited {color:yellow}

/*鼠标放上去*/
a:hover {color: black}

/*鼠标点了没松开*/
a:active {color: blue}


<html>
<head>
<link rel="stylesheet" type="text/css" href="lab2.css">
</head>
<body>
<h1>hello world</h1>
<hr>
<p>welcome to shengsiyuan</p>
<p><a href="http://www.sina.com">This is a link</a></p>
</body>
</html>


http://www.ngui.cc/el/4893631.html

相关文章

精通CSS.DIV网页样式与布局_第二章

<html><head><title>class选择器</title><style type"text/css"><!--.one{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */}.two{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */}.three{ color:cyan; /*…

(转) Struts2 URL参数 s:if 判断应用

Struts2的s:if标签很怪异&#xff0c;下面来具体地看看&#xff0c;如何用s:if标签来判断URL中的参数。 访问一个带有URL参数的页面&#xff0c;如&#xff1a;http://localhost:8080/a.jsp?namexht555 # <% page language"java" contentType"text/html; ch…

从 iBatis 到 MyBatis(转)

从 iBatis 到 MyBatis&#xff0c;你准备好了吗&#xff1f; 对于从事 Java EE 的开发人员来说&#xff0c;iBatis 是一个再熟悉不过的持久层框架了&#xff0c;在 Hibernate、JPA 这样的一站式对象 / 关系映射&#xff08;O/R Mapping&#xff09;解决方案盛行之前&#xff0c…

Spring使用AOP时ClassCastException问题

[sizelarge]Spirng实现AOP采用动态代理还是CGLIB代理&#xff0c;两种方式如下&#xff1a;[/size] [sizemedium] 1、Spring&#xff1a;自动选择。[/size] 如果有实现接口采用JDK动态代理 如果没有实现接口采用cglib代理 <aop:aspectj-autoproxy proxy-target-class&qu…

Java SE 第一讲_JDK下载_安装_Java程序编译与执行

[sizelarge][b]Java SE 第一讲&#xff1a;[/b][/size] Java SE&#xff1a;Java Standard Edition Java ME: Java Micro Edition Java EE&#xff1a;Java Enterprise Edition Java是由Sun公司推出的&#xff08;2010年初被Oracle公司收购&#xff09;。 收购价格&#xff1…

Java SE 第二讲_原生数据类型

[b]Java SE 第二讲&#xff1a;[/b] 1. Windows: notepad, editplus, ultraedit, gvim Linux: vi, vim, gedit [colorred]2. Java中的数据类型分为两大类&#xff1a; 1&#xff09; 原生数据类型 &#xff08;Primitive Data Type&#xff09;共8种 2&#xff09; 引用类型…

Java SE 第三讲 Java原生数据类型

[sizemedium][b]Java SE 第三讲&#xff1a;[/b][/size] [colorred]1. Java中的原生数据类型共有8种&#xff1a;[/color] 1&#xff09; 整型&#xff1a;使用int表示。&#xff08;32位&#xff09; 2&#xff09; 字节型&#xff1a;使用byte表示。&#xff08;表示-128&…

Java SE 第四讲(运算符 Operator)

[sizemedium][b]Java SE 第四讲&#xff1a;[/b][/size] 1. 当有若干个变量参与运算时&#xff0c;结果类型取决于这些变量中表示范围最大的那个变量类型。比如&#xff0c;参与运算的变量中&#xff0c;有整型int&#xff0c;有双精度浮点型double&#xff0c;有短整型short&a…

Java SE 第五讲:运算符续 Operator cont

[sizemedium][b]Java SE 第五讲&#xff1a;[/b][/size] 1. 关系运算符&#xff1a;大于&#xff08;>&#xff09;、小于&#xff08;<&#xff09;、等于&#xff08;&#xff09;、不等于&#xff08;!&#xff09;、大于等于&#xff08;>&#xff09;、小于等于&…

Java SE 第六讲:运算符续 条件运算符

[b][sizemedium]Java SE 第六节[/size][/b] 1. 条件运算符&#xff08;三元表达式&#xff09;&#xff0c;其形式为&#xff1a; type d a ? b : c; 具体化形式为&#xff1a;int d 2 < 1 ? 3 : 4; 2. [b]轻量级的文本编辑器[/b]&#xff1a;UltraEdit、Editplus、vi、…