首先是html的基本格式
<html>
<head>
<meta charset="utf-8">
<title>个人网</title>
</head>
<body>
</body>
</html>
此博客主要以复习为主,内容不会太细,主要在操作中回忆或者学习相关知识点
首先构建一个网页基本框架
框架代码:
main.html
<html>
<head>
<title>个人网</title>
</head>
<!--frameset定义框架集-->
<!--frame定义框架-->
<frameset rows="20%, *"><!--先按行分为两部分,第一部分占20%-->
<frame src = top.html><!--第一部分插入top.html-->
<frameset cols = "20%, *"><!--将接下来的部分分为两列,第一列占20%-->
<frame src="left.html"><!--注意frame的属性-->
<frame src="right.html"><!--剩下的部分-->
</frameset>
</frameset>
</html>
这部分主要是frame和frameset的运用,这部分是主体结构,将要网页分为三部分top,left,right,每部分都链接相应html。
接下来设计top这个部分
top.html:
<html>
<head>
<link rel=stylesheet href=my.css type="text/css">
<title>个人网</title>
</head>
<body class=w3></body>
<font class="s3 s5" color= yellow><h1 align="center">个人简介</h1></font>
<font class="s3 s5" color=red ><h2 align="center">欢迎 欢迎</h2></font>
</body>
</html>
这部分就是在背景图片插入文字。首先link先不在意,后面再系统讲,这里类似h1,h2,标签不能通过size,color直接改变其属性,要接入font属性来改变 。还有就是背景照片,主要是w3类
.w3{
background-image:url(huanyin.jpg), url(hyin.jpg);
background-size:20% 100%, 20% 100%;
background-repeat:no-repeat no-repeat;
background-color: rgb(184, 230, 61);
background-position: left, right;
}
上面就是插入照片的相应属性,第二个是宽和高的大小,最后的两个照片的相应位置.注意url里面是照片的名字,这里是直接将照片和这个网页代码放在同一个文件,照片才可以显示。这里要懂相对路径和绝对路径。
下面right和前面的相似
right.html
<html>
<head>
<link rel=stylesheet href=my.css type="text/css">
<title>个人网</title>
</head>
<body class=q1>
<font color= RGB(255,204,51)><h3 align="center">随笔 随记</h3></font>
<h5 align="center"><p>月下饮茶</p><p>亦醉,亦睡</p><br>我们看不到空气</br>
<p>鱼看得到水吗</p><br>我欣赏哲人的眼光</br><p>退而求其次的忍让</p><p>在艺术与温饱之间</p>
<p>选择了轻狂</p><br>我有故事</br><p>你有诗吗</p></h5>
</body>
</html>
下面是left部分,这部分是超链接很重要
left.html
<html>
<head>
<link rel=stylesheet href=my.css type="text/css">
<title>left</title>
</head>
<body>
<table width=100% border=5 height = 50% >
<tr height=10%>
<th width=20% bgcolor=green" >主要栏目</th>
</tr>
<tr height=10%>
<th width=20% bgcolor="#EEE8AA" ><a href ="zhandian.html" target = "_top">站点简介</a></th>
</tr>
<tr height=10%>
<th width=20% bgcolor="FFEFD5"><a href ="网格介绍.html" target = "_top">简介网格版</a></th>
</tr>
<tr height=10%>
<th width=20% bgcolor="#EEE8AA" ><a href ="个人简介.html" target = "_top">简介普通版</a></th>
</tr>
<tr height=10%>
<th width=20% bgcolor="FFEFD5"><a href ="https://image.baidu.com/search/index?ct=201326592&cl=2&st=-1&lm=-1&nc=1&ie=utf-8&tn=baiduimage&ipn=r&rps=1&pv=&fm=rs6&word=%E5%94%AF%E7%BE%8E%E5%9B%BE%E7%89%87&oriquery=%E5%9B%BE%E7%89%87&ofr=%E5%9B%BE%E7%89%87&sensitive=0" target = "_top">友情链接</a></th>
</tr>
</body>
</html>
这里《table》《 th》等都是表格部分,这里主要注意《a》,href对于的属性值是要跳转的网站地址或者文件名称,接下来是tagart在超链接的四种选择_self,_top,_blank,_parent
大佬的解释链接: link.
下面是不同target属性值的不同结果(点"站点介绍"这个链接):
_top这里和parent一样:
![在这里插入图片描述]直https://接上传(blog.csdn-i49umg.cn/2020123020684.png?x-oss-process=image/watermark,type_ZmFuZ22493poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JidGtpbmc=,size_16,color_FFFFFF,t_70)https:/
下面是_self和没写target属性值一样
下面是_blank
最后再说一下link,这里主要是更好管理选择器,将所有的选择器都写在一个文件,以.css为后缀名,这里将所有的选择器写在了my.css,然后那个文件要用它,只要在head中间加一个
<head>
<link rel=stylesheet href=my.css type="text/css">
如果不用.css,就这样写
<style type="text/css">
.s1{
background: antiquewhite;
}
<.style>
my.css
.s1{
color:balck;
font-size:9px;
}
.s2{
color:red;
font-style:italic;
}
.s3{
text-decoration:underline;
}
.s4{
color:rgb(206, 60, 16);
}
.s5{
font-style:italic;
}
.s6{
font-size: 18px;
}
body{background-color: #DCC;}
.q1{
background-image:url(hua.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
background-color: antiquewhite;
background-position: right center;}
.w1{font-family:"微软雅黑";
color:#FFF;
background-color:#FC3;
font-size: 30px;
}
.w2{font-family:"微软雅黑";
color:#FFF;
background-color:rgb(56, 211, 190);
}
.w3{background-image:url(huanyin.jpg), url(hyin.jpg);
background-size:20% 100%, 20% 100%;
background-repeat:no-repeat no-repeat;
background-color: rgb(184, 230, 61);
background-position: left, right;
}
.w4{
background-image:url(yu.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
background-color: rgba(12, 233, 60, 0.726);
background-position: left center;
}