最终效果(两边留白看不到):
HTML:
<div class="add_layer" id="ads"> <div class="layer_con"> <ul> <li class="close" onclick="noneAds()">X</li> <li>由于年关将至,2月12日—2月15日期间除顺丰和EMS物流以外,其他物流暂停发货。在此期间购买产品<br/>的用户如果顺丰或EMS物流到不了的偏远地区则延迟到2月26日开始发货。2月16日以后 购买产品的用户全部延迟到2月26日开始发货。带来不便敬请见谅! </li> </ul> </div> </div>
一、外层DIV
中间黑色部分:
.add_layer { max-width:1600px; width:100%; top:0; height:150px; overflow:hidden; margin:0 auto; clear:both; background:url(../image/if/bg.jpg) top repeat-y; }
分析:
1、宽度100%,本来应该从左到右,但设置了max-width:1600,所以现在DIV只有1600宽
2、又设置了margin:0 auto,所以该DIV会水平居中
3、背景bg.jpg,为一长条图片,宽度为1600,纵向平铺,所以该DIV背景即为bg.jpg铺满
二、内层DIV
图中黑色部分
.layer_con { width:820px; margin:0 auto;} //设置中间的文字DIV,居中
三、UL
.layer_con ul { list-style:none; padding:0; margin:0;} .layer_con li { font-size:16px; font-family:Arial, "微软雅黑"; color:#000; line-height:30px; padding-top:5px; padding-bottom:5px; padding-right:85px; text-shadow:1px 1px 1px #ddd; } .layer_con li.close { text-align:right; padding:0; padding-right:45px; font-size:20px; margin-top:5px;font-family:Arial; cursor:pointer;}
全部CSS:
<div class="add_layer" id="ads"> <div class="layer_con"> <ul> <li class="close" onclick="noneAds()">X</li> <li>由于年关将至,2月12日—2月15日期间除顺丰和EMS物流以外,其他物流暂停发货。在此期间购买产品<br/>的用户如果顺丰或EMS物流到不了的偏远地区则延迟到2月26日开始发货。2月16日以后 购买产品的用户全部延迟到2月26日开始发货。带来不便敬请见谅! </li> </ul> </div> </div> .add_layer { max-width:1600px; width:100%; top:0; height:150px; overflow:hidden; margin:0 auto; clear:both; background:url(../image/if/bg.jpg) top repeat-y; } .layer_con ul { list-style:none; padding:0; margin:0;} .layer_con li { font-size:16px; font-family:Arial, "微软雅黑"; color:#000; line-height:30px; padding-top:5px; padding-bottom:5px; padding-right:85px; text-shadow:1px 1px 1px #ddd; } .layer_con li.close { text-align:right; padding:0; padding-right:45px; font-size:20px; margin-top:5px;font-family:Arial; cursor:pointer;}
..
相关推荐
在命令行中运行以下命令,根据提示选择配置,创建名为"电商首页"的项目: ```bash vue create 电商首页 ``` 接下来,进入项目目录并启动开发服务器: ```bash cd 电商首页 npm run serve ``` Vue项目的基本结构...
网页布局通常包括头部(Header)、主体(Main Content)、侧边栏(Sidebar)和底部(Footer)等元素。在HTML中,这些元素可以通过div标签进行组织,使用class或id属性来定义样式和功能。CSS(层叠样式表)则负责控制...
网站的首页布局框架是网页设计中的重要组成部分,它决定了用户对网站的第一印象和使用体验。一个良好的首页布局能够引导用户快速找到所需信息,提升网站的吸引力和可用性。以下是对标题和描述中所述知识点的详细解释...
1. **界面设计**:使用XML布局文件创建相似的UI界面,包括消息和电话的图标、按钮和滑动切换效果。这涉及到Android的LinearLayout、RelativeLayout或ConstraintLayout,以及iOS的Storyboard或SwiftUI。 2. **导航...
这种设计允许用户通过下拉手势来缩放Header中的图片,增强了用户体验,常见于新闻、电商等应用的首页。在Android开发中,这种效果可以通过自定义View或者使用第三方库来实现。 这篇博文(虽然链接无法直接访问,但...
本模板专为网上购物设计,可能包含首页、商品列表页、商品详情页、购物车、结算页等常见的电商页面元素。通过替换模板中的图片、文字和链接,可以轻松定制成个性化的电商网站。 4. **静态页面**:index.html是HTML...
描述中的“代码很简单,请自行看”提示我们,可能在提供的压缩包文件"Statebar"中包含了实现这一效果的源代码。在实际项目中,开发者可能会使用诸如`android:fitsSystemWindows="true"`这样的属性来让布局适应系统...
* 首页头部布局:完成首页头部布局,包括LOGO、搜索框、购物车等元素。 * 首页右上方菜单布局:完成首页右上方菜单布局,默认菜单隐藏,点击菜单按钮后显示菜单内容。 * 首页“限时折扣”商品图文列表布局:完成首页...
在"京东首页html"部分,开发者可能使用了`<header>`、`<nav>`、`<main>`、`<section>`、`<article>`、`<aside>`、`<footer>`等语义化标签来组织页面元素,如头部、导航、主要内容、侧边栏和页脚。此外,还会包含商品...
在本部分中,考生需要按照效果图进行网站各个页面布局,包括使用符合w3c标准的标签布局、企业网首页整体框架布局、页面导航使用ul,li,a布局、搜索框布局、首页头部栏目布局、网站主体banner模块布局、企业简介图片...
在京东商城首页的实现中,我们需要利用CSS来设置背景色、边框、阴影、过渡效果以及响应式布局。可以使用类选择器、ID选择器、伪类选择器等来定位特定元素,同时通过媒体查询实现不同设备的适配,确保页面在手机、...
6. 案例——幻灯片效果:幻灯片效果是指在网页中实现的类似幻灯片的效果,例如鼠标 hover 时出现的提示信息、点击按钮时出现的动画效果等。这种效果可以提高用户体验,增加网页的交互性。 7. html 文档结构:html ...
* 完成首页头部布局,检查整体页面是否符合效果图,使用div合理布局。 * 完成页面右上方菜单布局,默认菜单隐藏,点击菜单按钮后显示菜单内容,检查整体页面是否符合效果图,使用div、li合理布局。 * 完成首页“限时...
在小米官网首页的源代码中,HTML元素会用于创建页面的基本骨架,如头部、导航、主体内容、产品介绍、底部链接等部分。通过使用不同的HTML标签,如`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>` 和 `...
- **作用**:消息提示,例如错误信息、成功提示等。 - **示例代码**: ```html 用户名或密码错误! ``` #### 三、CSS样式配置 ##### 1. `Footer` - **样式配置**: ```css footer { background-color: #f2f...
头部导航通常包含网站的主要链接,如首页、关于我们、产品/服务、联系我们等,使用户能方便地浏览网站的不同区域。"灰色标准企业模板"的头部导航可能包含了这些常见元素,并且可能采用了Web2.0的设计风格。Web2.0是...
“大气”、“头部”和“按钮”提示我们,模板的布局可能是宽敞、开放式的,头部设计可能包含重要的导航元素和功能按钮,这些按钮可能采用现代的Web2.0风格,注重交互性和美观性。 “web2.0”是指一种流行的网页设计...
1. **基础布局**:了解如何使用`div`创建基本的网页结构,如头部、主体和底部。 2. **CSS选择器**:学习如何通过类名、ID、元素选择器等定位和选择需要的`div`元素。 3. **盒模型**:理解`width`、`padding`、`...
在`index.html`中,你可以看到各种元素如头部、主体、底部等,以及各个链接区块的布局。这些区块通常会包含搜索引擎框、热门网站链接、分类导航等。源码会详细描述如何通过HTML标签和属性来构建这些功能。 2. **...
3、头部个人菜单展开下拉菜单时,消息提示框同时显示的优化; 4、在门户、论坛顶部的时候,增加了微信关注等功能,当滚动到内容部分是在变回默认头部效果; 5、头部配色修改IE6支持透明效果; 6、将 谈婚论嫁...