张夏楠的学习日记

张夏楠 · 发表于 2022-1-23 21:48:03

框架集的的运用：
后台管理：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>后台管理</title>
</head>
<frameset rows="150,*" >
<frame noresize="noresize" src="head.html" /> -------页面显示的最上面那层
<frameset cols="200,*" >
<frame noresize="noresize" src="left.html"/> -------页面显示的左面那层
<frame noresize="noresize" src="body.html" name="body"/> -------页面显示的右下面那层
<frameset/>
<frameset/>
</html>

复制代码

主体：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>主体</title>
</head>
<body>
<h1>我是网站主体</h1>
</body>
</html>

复制代码

左侧内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>左侧内容</title>
</head>
<body>
<ul type="none">
<li><h3><a href="xitong.html" target="body">系统管理</a></h3></li>
<li><h3><a href="people.html" target="body">人员管理</a></h3></li>
<li><h3><a href="">考勤管理</a></h3></li>
<li><h3><a href="">内容管理</a></h3></li>
<li><h3><a href="body.html" target="body">网站首页</a></h3></li>
<li><h3><a href="">修改密码</a> </h3></li>
</ul>
</body>
</html>

复制代码

标签：

过渡性的页面写框架：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>iframe</title>
</head>
<body>
%%%%%%%
<br />
***********
<br />
<iframe src="https://www.csdn.net/?spm=1001.2101.3001.4476" frameborder="0"></iframe>
<br />
%%%%%%%
<br />
***********
</body>
</html>

复制代码

张夏楠 · 发表于 2022-1-24 17:46:36

css基础：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>css基础—外部文档链接</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
p{color:blue;text-align:center;}
h1{color:#999999;font-size:12px;} ——段落字体是12px
</style>
</head>
<body>
<p>我是段落</p>
<p style="color:black;text-align:right;">我是段落2</p>
<h1>我是标题</h1>
</body>
</html>

复制代码

通配选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>通配选择器</title>
<style type="text/css">
*{color:red;} ——属性：设置文本颜色为红色
</style>
</head>
<body>
<p>我是段落</p>
<h1>我是标题</h1>
<ul>
<li>我是列表</li>
</ul>
</body>
</html>

复制代码

张夏楠 · 发表于 2022-1-27 18:04:10

类选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>类选择器</title>
<style type="text/css">
.tag01{color:red;border:1px solid red;width:300px;height:100px;} ——class属性：设置文本颜色为红色
.tag02{list-style-type:none;}
</style>
</head>
<body>
<p class="tag01">我是段落</p>
<ul>
<li class="tag01 tag02">我是列表1</li> ——在列表中添加相同的属性（"tag01"）
<li class="tag01">我是列表2</li>
</ul>
</body>
</html>

复制代码

注意：必须以字母开头，可以有字母数字以及下划线组成

id选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>ID选择器</title>
<style type="text/css">
#tag_01{color:rgb(255,100,255);} ——与类选择器的区别
</style>
</head>
<body>
<p id="tag_01">我是段落</p
</body>
</html>

复制代码

群组选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>群组选择器</title>
<style type="text/css">
li,td,.tag01,#tag_01{color:blue;font-size:50px;}
</style>
</head>
<body>
<p class="tag01">我是段落</p>
<h1 id="tag_01">我是标题</h1>
<ul>
<li>我是列表</li>
</ul>
<table>
<tr>
<td>我是表格</td>
</tr>
</table>
</body>
</html>

复制代码

后代选择器：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
      <meta charset="utf-8">
      <title>后代选择器</title>
      <style type="text/css">
            table a{text-decoration: none;color:red;font-size: 5cm;}
      </style>
</head>
<body>
      <table>
               <tr>
                     <td>
                           <div>
                                 <p>
                                       <a href="https://www.csdn.net/?spm=1001.2101.3001.4476">csdn一下就知道</a>
                                 </p>
                           </div>
                     <td>
               </tr>
      </table>
</body>
</html>
去除了CSDN网页的下划线

张夏楠 · 发表于 2022-1-30 23:10:51

子代选择器:只能通过两份，再往上延伸不行。
灰色背景，红色文字：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>子代选择器</title>
<style type="text/css">
tr > td{color:red;background-color:#999999;}
</style>
</head>
<body>
<table>
<tr>
<td>我是td</td>
</tr>
</table>
</body>
</html>

复制代码

属性选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
[title]{border:1px solid red;width:200px;height:100px;}
</style>
</head>
<body>
<img src="" alt="" title="image01" id="tag01"/>
<img src="" alt="" title="image02" class="tag02"/>
<p>我是段落</p>
<h1>我是标题</h1>
</body>
</html>

复制代码

添加img中标题以及id的属性代码后，限制了查找：

img[title][id]{border:1px solid red;width:200px;height:100px;}

复制代码

相邻兄弟选择器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
td+td{color:red}
</style>
</head>
<body>
<table>
<tr>
<td>我是td1</td>
<td>我是td2</td>
</tr>
<tr>
<td>我是td3</td>
<td>我是td4</td>
</tr>
</table>
</body>
</html>

复制代码

<style type="text/css">
.tag01+ .tag02{color:red}
</style>
<tr>
<td class="tag01">我是td1</td>
<td class="tag02">我是td2</td>
</tr>

复制代码

张夏楠 · 发表于 2022-2-3 22:20:59

css中的伪类：

css中的四种属性：
字体、文本、背景、边框
字体属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>字体属性</title>
<style type="text/css">
h1{font-family:"幼圆","黑体";font-size: 30px;font-style: normal;}
h2{font-family:"幼圆";font-size: 2cm;font-style: italic;}
h3{font-size: 300%;}
</style>
</head>
<body>
<h1>我是第一段文字</h1>
<h2>我是第二段文字</h2>
<h3>我是第三段文字</h3>
</body>
</html>

复制代码

字体大小：h1{font-family:"幼圆","黑体";font-size: 30px;}
h2{font-family:"幼圆";font-size: 2cm;}
h3{font-size: 300%;}

字体样式：font-style: normal;font-style: italic;

文本样式属性：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>文本样式属性</title>
<style type="text/css">
h1{text-decoration: underline;} //下划线
h2{text-decoration:overline;} //上划线
h3{text-decoration: line-through;} //删除线
</style>
</head>
<body>
<h1>我是第一段文字</h1>
<h2>我是第二段文字</h2>
<h3>我是第三段文字</h3>
</body>
</html>

复制代码

张夏楠 · 发表于 2022-2-8 23:29:56

文本样式属性：（1）下划线、上划线、删除线：text-decoration: underline、text-decoration: overline、text-decoration: line-through（2）对齐方式：text-align: left、text-align: center、text-align: right;

（3）首行缩进：text-indent:2cm
（4）行高；line-height:30px;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>文本样式属性</title>
<style type="text/css">
h1{text-decoration: underline;
text-align: left;
text-indent:2cm;line-height:30px;
border: 1px solid red;
font-size: 20px;
} //下划线,左对齐
h2{text-decoration: overline;text-align: center;} //上划线，居中对齐
h3{text-decoration: line-through;text-align: right;} //删除线，右对齐
</style>
</head>
<body>
<h1>我是第一段文字</h1>
<h2>我是第二段文字</h2>
<h3>我是第三段文字</h3>
</body>
</html>

复制代码

背景样式属性：
背景红色、边框蓝色：
            div{background-color: red;
                  height:1200px;
                  border: 1px solid blue;
                  }

张夏楠 · 发表于 2022-2-8 23:31:04

文本样式属性：（1）下划线、上划线、删除线：text-decoration: underline、text-decoration: overline、text-decoration: line-through（2）对齐方式：text-align: left、text-align: center、text-align: right;
（3）首行缩进：text-indent:2cm
（4）行高；line-height:30px;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>文本样式属性</title>
<style type="text/css">
h1{text-decoration: underline;
text-align: left;
text-indent:2cm;line-height:30px;
border: 1px solid red;
font-size: 20px;
} //下划线,左对齐
h2{text-decoration: overline;text-align: center;} //上划线，居中对齐
h3{text-decoration: line-through;text-align: right;} //删除线，右对齐
</style>
</head>
<body>
<h1>我是第一段文字</h1>
<h2>我是第二段文字</h2>
<h3>我是第三段文字</h3>
</body>
</html>

复制代码

背景样式属性：
背景红色、边框蓝色：
            div{background-color: red;
                  height:1200px;
                  border: 1px solid blue;
                  }

张夏楠 · 发表于 2022-2-13 23:54:02

张夏楠 · 发表于 2022-2-13 23:57:43

实线边框：
虚线边框：dashed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>边框样式属性</title>
<style type="text/css">
div{border-color:red;
border-width: 1px;
border-style: dashed;
}
</style>
</head>
<body>
<div>
我是一个div
</div>
</body>
</html>

复制代码

双实线： border-style: double;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>边框样式属性</title>
<style type="text/css">
div{
border-bottom: 1px double blue;
}
p{border-top:1px solid red;}
h1{border-left:1px dashed green;}
</style>
</head>
<body>
<div>
我是一个div
</div>
<p>我是p标签</p>
<h1>我是h1标签</h1>
</body>
</html>

复制代码

张夏楠 · 发表于 2022-2-16 23:37:03

网页大概分三个部分：head区域、main主体区域和foot区域

top区域：top区域排版，修改字体的样式、行高、内外边距，超链接的样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<title>店铺首页</title>
<style type="text/css">
*{margin:0;padding: 0;} ——公共css样式
body{border:1px solid red;}
ul{list-style: none;}
.clear{display: block;overflow: hidden;}
.head{border: 1px solid blue;}
.top{border: 1 px solid green;}
.top ul li{float: left;}
</style>
</head>
<body>
<div class="body">
<div class="head">
<div class="top">
<div><span>欢迎你回来！</span><a href="#">退出</a></div>
<ul class="clear">
<li><a href="#">网站首页</a></li>
<li><a href="#">网站导航</a></li>
<li><a href="#">我的服务</a></li>
<li><a href="#">会员中心</a></li>
<li><a href="#">意见箱</a></li>
</ul>
</div>
<div class="head_img"></div>
<div class="nav"></div>
</div>
</div>
</body>
</html>

复制代码

		自动登录	找回密码
密码			立即注册

张夏楠的学习日记

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源

本帖子中包含更多资源