`
uule
  • 浏览: 6352187 次
  • 性别: Icon_minigender_1
  • 来自: 一片神奇的土地
社区版块
存档分类
最新评论

首页头部提示布局

    博客分类:
  • CSS
 
阅读更多

最终效果(两边留白看不到):



 

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;}

 

..

 

  • 大小: 65.1 KB
  • 大小: 120 KB
  • 大小: 128.9 KB
  • 大小: 2.1 KB
分享到:
评论

相关推荐

    vue脚手架搭建环境简单电商首页单页面布局

    在命令行中运行以下命令,根据提示选择配置,创建名为"电商首页"的项目: ```bash vue create 电商首页 ``` 接下来,进入项目目录并启动开发服务器: ```bash cd 电商首页 npm run serve ``` Vue项目的基本结构...

    网站主页布局教学示例vs实现

    网页布局通常包括头部(Header)、主体(Main Content)、侧边栏(Sidebar)和底部(Footer)等元素。在HTML中,这些元素可以通过div标签进行组织,使用class或id属性来定义样式和功能。CSS(层叠样式表)则负责控制...

    网站的首页布局框架

    网站的首页布局框架是网页设计中的重要组成部分,它决定了用户对网站的第一印象和使用体验。一个良好的首页布局能够引导用户快速找到所需信息,提升网站的吸引力和可用性。以下是对标题和描述中所述知识点的详细解释...

    高仿QQ首页消息和电话切换的实现

    1. **界面设计**:使用XML布局文件创建相似的UI界面,包括消息和电话的图标、按钮和滑动切换效果。这涉及到Android的LinearLayout、RelativeLayout或ConstraintLayout,以及iOS的Storyboard或SwiftUI。 2. **导航...

    pullzoomview头部图片下拉缩放功能

    这种设计允许用户通过下拉手势来缩放Header中的图片,增强了用户体验,常见于新闻、电商等应用的首页。在Android开发中,这种效果可以通过自定义View或者使用第三方库来实现。 这篇博文(虽然链接无法直接访问,但...

    div+css布局的前台模板

    本模板专为网上购物设计,可能包含首页、商品列表页、商品详情页、购物车、结算页等常见的电商页面元素。通过替换模板中的图片、文字和链接,可以轻松定制成个性化的电商网站。 4. **静态页面**:index.html是HTML...

    仿京东首页沉浸式以及滑动效果

    描述中的“代码很简单,请自行看”提示我们,可能在提供的压缩包文件"Statebar"中包含了实现这一效果的源代码。在实际项目中,开发者可能会使用诸如`android:fitsSystemWindows="true"`这样的属性来让布局适应系统...

    广东省职业技能等级认定证书试卷样题计算机程序员-Web前端开发(三级)A-09.docx

    * 首页头部布局:完成首页头部布局,包括LOGO、搜索框、购物车等元素。 * 首页右上方菜单布局:完成首页右上方菜单布局,默认菜单隐藏,点击菜单按钮后显示菜单内容。 * 首页“限时折扣”商品图文列表布局:完成首页...

    京东首页html+css+js

    在"京东首页html"部分,开发者可能使用了`&lt;header&gt;`、`&lt;nav&gt;`、`&lt;main&gt;`、`&lt;section&gt;`、`&lt;article&gt;`、`&lt;aside&gt;`、`&lt;footer&gt;`等语义化标签来组织页面元素,如头部、导航、主要内容、侧边栏和页脚。此外,还会包含商品...

    广东省职业技能等级认定证书试卷样题计算机程序员-Web前端开发(四级)答案.docx

    在本部分中,考生需要按照效果图进行网站各个页面布局,包括使用符合w3c标准的标签布局、企业网首页整体框架布局、页面导航使用ul,li,a布局、搜索框布局、首页头部栏目布局、网站主体banner模块布局、企业简介图片...

    模仿京东商城首页

    在京东商城首页的实现中,我们需要利用CSS来设置背景色、边框、阴影、过渡效果以及响应式布局。可以使用类选择器、ID选择器、伪类选择器等来定位特定元素,同时通过媒体查询实现不同设备的适配,确保页面在手机、...

    网页设计:从界面布局到视觉表现.ppt

    6. 案例——幻灯片效果:幻灯片效果是指在网页中实现的类似幻灯片的效果,例如鼠标 hover 时出现的提示信息、点击按钮时出现的动画效果等。这种效果可以提高用户体验,增加网页的交互性。 7. html 文档结构:html ...

    广东省职业技能等级认定证书试卷样题计算机程序员-Web前端开发(三级)答案.docx

    * 完成首页头部布局,检查整体页面是否符合效果图,使用div合理布局。 * 完成页面右上方菜单布局,默认菜单隐藏,点击菜单按钮后显示菜单内容,检查整体页面是否符合效果图,使用div、li合理布局。 * 完成首页“限时...

    小米官网首页11111111zip

    在小米官网首页的源代码中,HTML元素会用于创建页面的基本骨架,如头部、导航、主体内容、产品介绍、底部链接等部分。通过使用不同的HTML标签,如`&lt;header&gt;`, `&lt;nav&gt;`, `&lt;section&gt;`, `&lt;article&gt;`, `&lt;aside&gt;` 和 `...

    DVI+CSS常用布局标签

    - **作用**:消息提示,例如错误信息、成功提示等。 - **示例代码**: ```html 用户名或密码错误! ``` #### 三、CSS样式配置 ##### 1. `Footer` - **样式配置**: ```css footer { background-color: #f2f...

    灰色标准企业模板-灰色 标准 企业 产品 头部 导航 web20 图标.rar

    头部导航通常包含网站的主要链接,如首页、关于我们、产品/服务、联系我们等,使用户能方便地浏览网站的不同区域。"灰色标准企业模板"的头部导航可能包含了这些常见元素,并且可能采用了Web2.0的设计风格。Web2.0是...

    漂亮大气的商务网页模板_黄色 黑色 大图 企业 商务 整站 大气 头部 按钮 web20 漂亮 精品 整体色 渐变 地.rar

    “大气”、“头部”和“按钮”提示我们,模板的布局可能是宽敞、开放式的,头部设计可能包含重要的导航元素和功能按钮,这些按钮可能采用现代的Web2.0风格,注重交互性和美观性。 “web2.0”是指一种流行的网页设计...

    经典全套DIV+CSS实例

    1. **基础布局**:了解如何使用`div`创建基本的网页结构,如头部、主体和底部。 2. **CSS选择器**:学习如何通过类名、ID、元素选择器等定位和选择需要的`div`元素。 3. **盒模型**:理解`width`、`padding`、`...

    仿百度首页网址导航HTML源码.zip_仿百度导航_导航网站源码_百度导航_百度首页代码_网址导航

    在`index.html`中,你可以看到各种元素如头部、主体、底部等,以及各个链接区块的布局。这些区块通常会包含搜索引擎框、热门网站链接、分类导航等。源码会详细描述如何通过HTML标签和属性来构建这些功能。 2. **...

    2013最新仿华西都市网完整商业版,价值298元

    3、头部个人菜单展开下拉菜单时,消息提示框同时显示的优化; 4、在门户、论坛顶部的时候,增加了微信关注等功能,当滚动到内容部分是在变回默认头部效果; 5、头部配色修改IE6支持透明效果; 6、将 谈婚论嫁...

Global site tag (gtag.js) - Google Analytics