关于网页设计的思路

1.清除格式,清除浏览器自带的格式如margin padding input等等

2.设置页面基本的属性body{背景颜色,文本颜色,文本行距,文本字体大小,绝大多数}

3.开始给网页划分结构,分成导航区,内容区,底部区,然后根据页面结构给其细分.

导航栏设置:

<div class="nav">

<a href="#">1</a>

<a href="#">22</a>


</div>

比如为了实现点击时文本中的文字处于中间,并且根据文本大小不能而产生的效果不同

.nav{width:600px;height:40px;background:black;}

.nav>a:link,.nav>a:visited{padding-left:30px;padding-right:30px;float:left;display:block;text-decoration:none;height:40px;line-height:40px}

.nav>a:hover{background:blue;text-decoration:none;}

行内元素:不能独占一行,不可以设置宽高。不具有width height padding 等属性,内容根据文本内容来称起来.

块级元素:独占一行,可以 设置宽高,

HTML网页设计需要综合多方面因素,以设计出美观、体验优秀且令人难忘的网站。 为提高网页制作效率,布局时要确定页面版型(可视区),分析页面中的行模块和列模块。一行中的列模块常采用浮动布局,先确定每个列的大小,再确定列的位置。制作HTML结构要遵循“现有结构,后有样式”的原则,先理清楚布局结构再写代码,并且多写多整理 [^2]。 在编写HTML页面时,不要盲目使用div,应根据不同内容灵活使用各种其他标签,以提高页面效率。例如,导航栏部分使用<nav>标签,利于排版和修改;主体部分使用<figure>标签,可方便在图片下方添加标题;底部部分用表格或列表设计能节省代码量 [^5]。 为让网页令人难忘,可更改网站内容和调整整体设计,为用户提供新奇有趣的体验,鼓励用户不断探索新乐趣和不同感受。同时,即便采用新设计,网站整体风格、调性最好和之前保持一致 [^3]。 采用极简主义设计思路也很重要,多一些留白少一些混乱,聚焦于在需要的地方用有趣元素填充。留白可使用户更好地消化内容 [^4]。 此外,网页设计不仅要美观,还要注重用户体验,通过更加走心的设计抓住用户的心,让用户成为回头客并频繁互动,赋予网站长久的活力和实用性 [^1]。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>示例页面</title> </head> <body> <!-- 导航栏 --> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">服务</a></li> </ul> </nav> <!-- 主体部分 --> <figure> <img src="example.jpg" alt="示例图片"> <figcaption>这是一张示例图片</figcaption> </figure> <!-- 底部部分 --> <footer> <table> <tr> <td>版权信息</td> <td>联系我们</td> </tr> </table> </footer> </body> </html> ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值