当前位置：首页 > 焦点

csshtml设计网页模板

我做了三年企业官网，最烦听到客户说“要个大气点的页模”。大气是计网什么？是留白、是页模字体比例、是计网导航栏那一条细线。CSS和HTML从来不是页模堆特效，而是计网把信息摆得让人舒服。你看这个页面骨架——顶部是页模logo加导航，中间主视觉放一句slogan，计网下面三栏放产品卡片。页模就这么简单，计网但90%的页模新手会把导航做成七个颜色，把slogan加描边阴影，计网再把产品卡片塞满文字。页模结果用户打开三秒就关掉。计网

先写HTML结构，别急着碰CSS。一个干净的语义化标签比什么都重要。比如这个模板：<header>放品牌区，<nav>里用<ul>列表做菜单，<main>分左右两栏，左边是文章正文，右边是侧边栏。别用一堆<div>套娃，搜索引擎看不懂，你自己维护也头疼。我见过最夸张的案例，一个简单落地页用了17层嵌套div，最后改个字体大小要找半小时。

CSS部分要控制欲望。把全局样式写在最前面，body{ font-family:"Microsoft YaHei",sans-serif;margin:0;padding:0}，这行就够定基调了。然后给header设一个深色背景，高度60px，里面的logo用float:left，导航用float:right。注意浮动要清除，不然下面内容会顶上来。我习惯在容器末尾加个<div style="clear:both">，虽然不优雅，但管用。

真正体现功力的是间距和字号。正文区line-height设1.7，段落之间margin-bottom:20px。侧边栏的标题用14px加粗，正文用12px浅灰色。这些数值都不是拍脑袋定的——我做过眼动测试，12px以下阅读吃力，1.5倍行距以下段落分不清。你可以在浏览器按F12，把这段代码的line-height改成1.2试试，立刻觉得字挤在一起，像地铁广告。

响应式是躲不掉的坎。用@media (max-width:768px)把左右栏改成上下堆叠，导航栏变成汉堡菜单图标。这个图标不用引入图标库，纯CSS画三条横线就行：span{ display:block;width:24px;height:3px;background:#333;margin:4px 0}。手机用户的手指头比鼠标粗，点击区域至少44px，所以菜单项padding要加大。我去年做一个餐饮网站，老板在手机上试了半天说“这按钮怎么按不动”，一查是padding只有8px。

最后提一句配色。别超过三个主色，白底黑字灰辅助是最稳的。真想加点缀，用品牌色做按钮和链接就够了。你看我这个模板，整页只有深灰和浅灰，但信息层级清清楚楚——这就是CSS的力量，不是花哨，是秩序。你拿这个结构去改，把文字换成你的产品介绍，把颜色调成你的品牌色，一个能用的网页就出来了。没有框架，没有构建工具，就两个文件，index.html和style.css，文本编辑器就能写。

分享到：

相关推荐


最近发表
随机阅读
搜索
友情链接