案例——微金所页面

科技前沿 • 2025-03-04 14:44 • 阅读 65

大家好，我是讯享网，很高兴认识大家。

1.效果图

2.整体页面结构块

<!--顶部通栏--> <header class="wjs_header"></header> <!--导航--> <nav class="wjs_nav"></nav> <!--banner轮播图--> <div class="wjs_banner"></div> <!--信息--> <div class="wjs_info"></div> <!--预约--> <div class="wjs_reserve"></div> <!--产品--> <div class="wjs_product"></div> <!--新闻--> <div class="wjs_news"></div> <!--合作伙伴--> <footer class="wjs_partner"></footer>

讯享网

3.顶部通栏的制作：

a)效果：
在这里插入图片描述

b)分析：
i.这是一个通栏的结构，需要添加内容版心
ii.它需要实现响应式功能，在不同屏幕下显示的内容和样式不一样，所以使用响应式布局进行完成
iii.通栏块的宽度分布

c)结构：
在这里插入图片描述

d)结构块代码：
在这里插入图片描述

讯享网/*公共css样式*/ body{ 
    font-family: "Microsoft YaHei",sans-serif; font-size: 14px; color: #333; } a{ 
    text-decoration: none; color: #333; } a:hover{ 
    text-decoration: none; color: #333; } .m_l10{ 
    margin-left: 10px; } .m_r10{ 
    margin-right: 10px; } /*定义字体图标*/ @font-face { 
    font-family: 'wjs'; src: url('../fonts/MiFie-Web-Font.eot'); /* IE9*/ src: url('../fonts/MiFie-Web-Font.eot') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/MiFie-Web-Font.woff') format('woff'), /* chrome、firefox */ url('../fonts/MiFie-Web-Font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('../fonts/MiFie-Web-Font.svg') format('svg'); /* iOS 4.1- */ } /*自定义字体图标*/ .wjs_font_icon{ 
    font-family: wjs; } /*手机图标对应的编码*/ .wjs_font_icon_phone::before{ 
    content: "\e908"; } /*电话图标对应的编码*/ .wjs_font_icon_tel::before{ 
    content: "\e909"; font-size: 14px; }

ii.顶部通栏样式

.wjs_header{ 
    height: 50px; line-height: 50px; border-bottom: 1px solid #ccc; .row{ 
    height: 100%; text-align: center; > div:nth-of-type(-n+3){ 
    border-right: 1px solid #ccc; > .wjs_code{ 
    position: relative; display: block; > img{ 
    display: none; border: 1px solid #ccc; border-top: none; position: absolute; left: 50%; top:49px; transform:translateX(-50%); z-index: 999; } &:hover{ 
    >img{ 
    display: block; } } } } > div:last-of-type{ 
    > .btn-danger{ 
    background-color: @color; } > .btn{ 
    padding:3px 15px; } > .btn-link{ 
    color: #333; } } } }

f)细节说明：

i.字体图标的使用：自定义字体图标
ii.公共样式的建立
iii.Bootstrap提供的默认样式的使用(按钮和图标)
iv.在sm和xs屏幕下顶部通栏不需要显示

4.导航栏的制作

a)使用bootstrap预制的导航条：
在这里插入图片描述

b)删除没有用的部分，如下拉列表和表单等元素
c)添加相应数量的导航，修改文本内容
d)对其进行定义样式修改设置

i.修改版心容器的宽度：

案例——微金所页面

1.效果图

2.整体页面结构块

3.顶部通栏的制作：

4.导航栏的制作

相关推荐