html css设计网页初步

首先是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;
}

html css设计网页初步相关推荐

《Dreamweaver CS6 完全自学教程》笔记第十四章：使用 CSS 设计网页
文章目录第十四章:使用 CSS 设计网页 14.1 CSS 样式表简介 14.2 CSS 的基本语法 14.3 伪类.伪元素以及样式表的层叠顺序 14.3.1 伪类和伪元素 14.3.2 样式表的层 ...
设计html网页时需要遵循的语言规范,CSS设计网页时的一些常用规范
1CSS命名规范 CSS命名规范一．文件命名规范全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print ...
CSS/DIV网页设计视频教程目录【转】
CSS/DIV网页设计视频教程目录欢迎您来到前沿视频教室,下面列出的是CSS/DIV网页设计视频教程列表.这组视频教程是配合<精通CSS+DIV网页样式与布局>图书制作的,每一课对应于图 ...
CSS(网页样式语言)基础,网页CSS设计样式基础知识点小白教程
什么是CSS? CSS由哈坤·利在1994年提出,到1996年正式完成了CSS语言,并且在1998年收录到W3C组织. CSS(Cascading Style sheet),用于控制网页样式,并允许将 ...
HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码常见网页设计作业题材有个 ...
HTML5期末大作业：网页设计——小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品
HTML5期末大作业:网页设计--小米商城官网首页(1页) HTML+CSS+JavaScript web期末作业设计网页_清新淡雅个人网页大学生网页设计作业成品常见网页设计作业题材有个人. 美食 ...
web课程设计网页规划与设计：旅游景点网站设计——西安(20页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 HTML静态网页作业
HTML5期末大作业:旅游景点网站设计--西安(20页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
web课程设计网页规划与设计~在线阅读小说网页共6个页面(HTML+CSS+JavaScript+Bootstrap)...
HTML期末大作业 ~ 大学生网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结课作业 ...
19HTML5期末大作业：动画漫影视网站设计——动画漫展学习资料电影模板(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品课程设计网页规划与设计计算机毕设网页设计源
HTML5期末大作业:动画漫影视网站设计--动画漫展学习资料电影模板(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常 ...

html css设计网页初步

html css设计网页初步相关推荐

最新文章

热门文章