html css设计网页初步

最新推荐文章于 2023-11-29 14:55:42 发布

年少不知头发好

最新推荐文章于 2023-11-29 14:55:42 发布

阅读量706

点赞数 1

本文链接：https://blog.csdn.net/bbtking/article/details/111992057

版权

网页设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

年少不知头发好

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
html css设计网页初步

首先是html的基本格式<html><head><meta charset="utf-8"><title>个人网</title></head><body></body></html>此博客主要以复习为主，内容不会太细，主要在操作中回忆或者学习相关知识点首先构建一个网页基本框架框架代码：<html><head><title>个人网&l
复制链接

扫一扫