简单静态网页的搭建---用html+css

前言

之前讲了html和css的相关知识,也该是时候动手搭建一些简单的静态网页了。这一篇博客主要除了分享怎么搭建,更多是是想分享一些需要注意的小细节以及一些实用的技巧。

正文

1.先来看看成果

在这里插入图片描述
这个资源我上传好了,这是链接
里面jquery相关的翻页样式实现一起都放在里面了

2.搭建静态网页基本步骤

  1. 找到一个能够参考的网页模板,收集需要的素材
  2. 考虑规划好分区布局
  3. 先搭好html各个部分的大致框架,再去写css样式(搭一点写一点的那种)
  4. 将经常用到的css样式单独存放,方便引入其他html
  5. 耐心+细心

3.一些技巧和注意事项

1.讲讲在jetbrains系列软件中写html、css的操作

不管是IDEA还是pycharm或者是webstorm……,写的时候都要会使用TAB键,这个真的太省事了。
比如

<div id="div1"></div>

我们只需要输入div#div1然后按TAB键就行了,就和之前css讲的一样,class就用.。当然写css的时候更方便

height:20px;

我们只需要输入h20然后按TAB键就行了,更多的自己去尝试一下就知道啦。
列表的创建:ul>li*n然后TAB,n是需要的列表数
重复需要复制的时候用ctrl+d

2.常用的css样式

  1. 当我们需要块元素同一行显示的时候,通常使用浮动,但是这个时候父元素千万要有高度,或者就写上overflow:hidden;
  2. 学会用margin和padding去调节位置
  3. margin:0 auto;块元素水平居中,这个千万要记住哈哈哈
  4. :first-child、:last-child、 :nth-child(xn)的使用,这些一般是用于选择列表的第几个li做单独设置,:nth-child(xn)中x是数字,n会依次递增知道列表末尾,比如3n就是3,6,9……
  5. 面包屑导航,如下图
    在这里插入图片描述
    在这里插入图片描述

3.素材和注意事项

有的时候我们不用重复造轮子就可以借用网上有的素材,比如
在这里插入图片描述
就是去找网上的jquery直接下载搬进来的。

需要注意的地方:如果你写到哪里发现效果和你想象的不一样,或者哪里突然消失不见了,好好看看是不是哪里的px没加!!!一开始最容易发生的就是这个错误;然后就是注意css的划分,把常用的样式放在一起,多个页面涉及到的样式放在一起,这样能多次利用少写很多代码

结尾

相关的文件我已经上传了,正在审核,过几天我把资源链接贴上来。写这个网站大概花了四个多小时,对刚开始学html和css应该很有帮助。因为等下还有个事,所以这篇博客比较精简。

  • 2
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

shelgi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值