600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 如何用html和css制作网页 html和css如何实现制作一个网页

如何用html和css制作网页 html和css如何实现制作一个网页

时间:2019-05-06 04:22:17

相关推荐

如何用html和css制作网页 html和css如何实现制作一个网页

Hello 大家好:

首先欢迎大家可以翻开本作品:嘿嘿!

**“本作品是用html和css如何实现制作一个网页呢”**

那么大家打开此文档可能是为了看看,或者是这次的考试怎么可以学习一下放心大家可以在此处得到一个好的答案哦,我将会利用我上次在我的考试中所学到的东西为大家解读;希望大家可以看完。

首先我们制作一个网页是为了干什么:是为了完成此次的网页设计课程的考试嘛,还是为了完成一样属于自己的一件网页作品,那小编就不得而知,但是小编知道的是我接下来和大家分享的是足以让大家的考试过关,拿得到不到高分就看大家的利用能力了哦。好了费话不多说了。开干!!

1、那么我们的第一步是应该干什么呢?

小编答:定义自己要做一个什么样的网页像me做了一个个人博客。先定义好自己做的类型。这是第一大步呢,不做好这一步后面做不来的。

2、确定好主题后我们该干什么了呢?

应该是得找找适合自己的图片,视频,声音,flash动画等等。这都是为了后期的插入和美化网页。找好素材。不过也可以先做框架哦。

很好,主题我们做好后,首先呢了解制作网页应该在哪输入我们想要实现的内容呢!

“那么应该是框架呢,也就是为了不让网页看起来很凌乱,为了建设一个边框的意思“

![](/images/blog/04/08/9d527fc919cd51e4056b417a56d56724.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

如上图,便是一个网页的基本内容便是在这完成的。

3、”怎样的设计)

> 框架样子:

![](/images/blog/04/08/73afd303e00533a57f7d198cc72347c9.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

框架源码:

![](/images/blog/04/08/3a10a5015347ecc00133e7796b19ffe6.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

![](/images/blog/04/08/6a7495c0e77e94f96abf9c66bf0cba63.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

4、整个网页制作的流程

![](/images/blog/04/08/a98e8e95a75fb7462dc86f3b486a5ddb.jpg?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

5、网页制作的名词解释

Css样式解释:

1.text-align:center; /*文本居中*/

2.line-height:80px; /*行高 等于父级元素高度的时候 会垂直居中*/

3.font-size:20px; /*调整字体大小*/

4.line-height:70px; /*字体垂直居中*/

5.text-decoration:none; /*清除下划线*/

6.margin-left:38px;/*top上 left左 right右 bottom下 调整字体间隔*/

7.background-image: url("images/2.jpg");/*背景图片*/

8.background-size:100% 100%;/*背景大小*/

9./*animation:等待*/

10.transition:4s;/*过渡时间*/

11..banner:hover{/*假的或伪类 作用:悬停*/

12.list-style:none;/*清除列样式小圆点*/

13.float:left;/*浮动*/

14.overflow:hidden;/*溢出的隐藏*/

15.border:2px solid #cc0000;/*边框*/

16.border-radius:10px;/*增加圆角边框*/

17.transform:rotate(360deg) scale(1.2);/*scael缩放 n>1放大 n<1缩小 rotate 旋转 deg度*/

18.position:relative;/*相对于蓝色盒子定位居中*/

19.1、/*摆放正方体的位置*/

.front{

transform: translateZ(100px);/*translate平移(X代表左右 Y上下 Z前后 前面-正值 后-负值 XYZ代表方向)*/

}

20.

![](/images/blog/04/08/d5ce7249e525b9c9af0aca722904e9da.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)

好了就已经分享完了呢,大家要用html,css就得学会看清楚代码是什么意思呢,我在这就不再分享,我建议大家能动手查查呢。大家能明白标签是什么意思就能看明白。大家加油!!!

如果要本设计的最终显示结果大家可以向我要哦。。

还有哦大家可以看到style里有些词是为了定义不过就是个名称,对应在body..body里会出现jpg、gif、MP4这些就是图片和视频格式。大家可以用我的代码写的练手哦。。。记得找好素材哦!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。