网页设计
Posted Al_tair
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页设计相关的知识，希望对你有一定的参考价值。
网页设计
你开过⽹店吗？你知道玲琅满⽬的商品和那 些惊艳⼜⾼⼤上的产品详情是怎样呈现在我们眼前的吗？你在上⽹时是否发现有些⽹站禁⽌⽤户拷⻉内容（或其他的烦⼈的 限制）呢？以上所有这些，对于学过Web前端技术的⼯程师来说，都不叫事⼉～
网页设计
任务⼀
⾸先，在开源富⽂本编辑器中随便输⼊⼀段⽂本
网页设计html 用来编写网页的语言（文中框出来的是标签）
最后，实现编辑器没有的功能（javascript），我是用HBuilder完成如下任务
完成的效果
Javascript代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>button</title>
<style>
h3{
color: red;
}
table{
border: gray solid 1px;
}
td{
border: gray solid 1px;
}
</style>
<script type="text/javascript">
function button(){
alert("考试通过!!!");
}
</script>
</head>
<body>
<h3>CSDN能力认证中心</h3>
<table>
<tr style="color: gray;">
<td>C1</td>
<td>见习工程师认证</td>
</tr>
<tr>
<td>C4</td>
<td>专项工程师认证</td>
</tr>
<tr style="color: gray;">
<td>C5</td>
<td>全栈工程师认证</td>
</tr>
</table>
<br>
<input type="button" onclick="button()" value="我要考试" />
</body>
</html>
任务二
为了加深我们对HTML和CSS的网页设计的印象，接下来我们通过一个平台来开发一个简易性网页开发
首先，我们需要注册网站
然后，会有学习进程
我个人认为这是一个蛮不错的网页设计入门的平台
最后我先献上我设计的网页设计链接
拓展任务
任务要求
- 深⼊理解CSS盒⼦模型多层次含义
- 边框边距
- 标准⽂档流（浮动与定位）
- 布局模式
任务知识点
主要是通过代码的形式更加形象的描述该知识点
内边距
<!--
网页 >>>> 格局
1.盒子模型 >>>> 标签和标签存在包含关系时位置的调整
2.浮动 >>>> 多个块标签处于同一行的位置处理问题
3.定位 >>>> 块标签在页面指定位置的处理问题
网页的布局基本都是用块标签来完成的
一般做布局 使用的标签是div 帮助我们将网页划分成多个小方块
盒子模型
其实就是通过标签内边距和外边距的特点调整两个有包含关系的标签的位置
-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#div1{
border: 1px groove red;
font-size: 5px;
width: 200px;
height: 200px;
/*
内边距 内部元素距离当前块元素边界的距离
四个内边距不会向内占用空间，而是将块标签放大
*/
/*
padding 100px 同时设置上下左右四个内边距为100px
padding 100px 50px 设置上下内边距为100px,左右内边距为50px
*/
/* padding: 100px; */
/* padding: 100px 50px; */
padding: 50px 60px 70px 80px; 设置上右下左内边距,顺时针
}
</style>
</head>
<body>
<div id="div1">
哈哈哈哈哈哈哈，开心的一天！
</div>
</body>
</html>
外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div2{
font-size: 10px;
background-color: aquamarine;
width: 120px; height: 120px;
/*外边距 当前块标签外部和父级块标签之间的距离*/
/* 设置当前模块上下左右四个外边距都是200px(其他设置和内边距相同)*/
margin: 50px;
}
</style>
</head>
<body>
<div id="div2">
acscCsCas
<div>
</body>
</html>
浮动
<!--
浮动 float
就是在块标签独占一行的时候，通过浮动能将三块区域并排放置；变成行内标签就无法继续保持原有的高和宽
格式 float:left 向左浮动 float:right 向右浮动
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div8{
width:800px ;
height:400px ;
border: 1px solid black;
margin: 0px auto;
}
#div5{
width: 200px;
height: 200px;
background-color: yellow;
float:right;
}
#div6{
width: 200px;
height: 200px;
background-color: black;
float:right;
margin-right: 20px;
}
#div7{
width: 200px;
height: 200px;
float:right;
margin-right: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div8">
<div id="div5">
1
</div>
<div id="div6">
2
</div>
<div id="div7">
3
</div>
</div>
</body>
</html>
绝对定位
<!--
定位
页面布局的一种手段
绝对定位 相对定位 相对浏览器窗口定位
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div5{
height: 100px;
width: 100px;
background:green;
/* 定位
* 绝对定位
* 位置值 top bottom left right
*/
position: absolute;
top: 110px;
left: 120px;
}
.div6{
height: 100px;
width: 100px;
background:blue;
}
</style>
</head>
<body>
<div class="div5">1 </div>
<div class="div6">2 </div>
</body>
</html>
相对定位
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.div7{
height: 100px;
width: 100px;
background:green;
/* 定位
* 相对定位
* 位置值 top bottom left right
* 相对于原来的位置 当位置发生改变，不会释放原来的位置 其他标签不能占用原来的位置
*/
position: relative;
top: 110px;
left: 120px;
}
.div8{
height: 100px;
width: 100px;
background:blue;
}
</style>
</head>
<body>
<div class="div7">1 </div>
<div class="div8">2 </div>
</body>
</html>
完成的要求
完成的效果
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
background-color: lightgoldenrodyellow;
border: gray solid 8px;
width: 1000px;
height:800px;
margin: auto;
margin-top: 100px;
}
#div1{
float: left;
width: 300px;
height:760px;
margin: 20px;
}
#div2{
float: left;
width: 630px;
height:760px;
margin-top: 20px;
}
#div3{
width: 300px;
height:140px;
border: gray solid 1px;
text-align: center;
line-height:140px;
background-color: lightgreen;
}
#div4{
width: 300px;
height:600px;
border: gray solid 1px;
text-align: center;
margin-top: 20px;
line-height:600px;
background-color: lightgreen;
}
#div5{
width: 630px;
height:240px;
border: gray solid 1px;
text-align: center;
line-height:240px;
background-color: lightgreen;
}
#div6{
width: 630px;
height:500px;
margin-top: 20px;
}
#div7{
float: left;
width: 305px;
height:500px;
border: gray solid 1px;
text-align: center;
line-height:500px;
background-color: lightgreen;
}
#div8{
float: left;
width: 301px;
height:500px;
margin-left: 20px;
}
#div9{
width: 301px;
height:239px;
border: gray solid 1px;
text-align: center;
line-height:239px;
background-color: lightgreen;
}
#div10{
width: 301px;
height:239px;
border: gray solid 1px;
margin-top: 20px;
text-align: center;
line-height:239px;
background-color: lightgreen;
}
</style>
</head>
<body>
<div id="div1">
<div id="div3">1</div>
<div id="div4">2</div>
</div>
<div id="div2">
<div id="div5">3</div>
<div id="div6">
<div id="div7">4</div>
<div id="div8">
<div id="div9">5</div>
<div id="div10">6</div>
</div>
</div>
</div>
</body>
</html>
总结
这个是csdn任务三，我也坚持下来了，给自己点一个赞，学习网页设计，我觉得更多在于对标签的理解和熟记标签的用法。
以上是关于网页设计的主要内容，如果未能解决你的问题，请参考以下文章