设为首页
收藏本站
开启辅助访问
请
登录
后使用快捷导航
没有帐号?
立即注册
首页
课程设置
平面设计
室内设计
机械设计
园林景观设计
影视后期制作
论坛
老师加盟
登录
|
注册
搜索
搜索
本版
帖子
用户
快捷导航
室内设计学院
论坛
BBS
论坛
›
学院
›
平面设计学院
›
banner中输入boder属性后logo图片能居中,否则无法居中 ...
返回列表
caomei123
1
主题
1
帖子
6
积分
新手上路
新手上路, 积分 6, 距离下一级还需 44 积分
新手上路, 积分 6, 距离下一级还需 44 积分
积分
6
加为好友
发送消息
访问家园
0
451
电梯直达
[提问]
banner中输入boder属性后logo图片能居中,否则无法居中,请问是什么问题?
caomei123
|
新手上路
|
勤币 121
|
学币 0
发表于 2019-3-15 11:12
|
复制链接
|
打印
|
上一主题
|
下一主题
html+css网页前端课程
-
3.5.网页布局实战-Gulp中文网
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
/*公共区域*/
*{ padding:0; margin:0;}
body{ font-family:"微软雅黑", "黑体", "宋体";}
a{ text-decoration:none;}
ul{ list-style:none;}
/*头部*/
.header{ width:100%; background:#CF4646; height:50px; }
.header a{ color:#eee;}
.header a:hover{ color:#fff;}
.hdtext{ width:1200px; margin:0 auto; line-height:50px;}
.hdtext .hdleft{ font-size:18px; float:left;}
.hdtext .hdright{ float:right;}
.hdright li{ display:inline; padding:0 15px; font-size:14px;}
/*banner区域*/
.banner{ height:420px
;
border:1px solid #cf4646;
background:#cf4646;text-align:center;}
.banner img{ margin-top:60px; }
.banner p{ font-size:25px; color:#fff; margin:20px auto 60px; font-weight:300;}
.banner .navbanner{ font-size:20px; color:#eee; padding:10px 20px; border:2px solid #eee;}
/*contant区域*/
.contant{ width:1200px; margin:80px auto 40px; overflow:hidden;}
.context{ float:left; padding:0 10px; width:560px;color:#333; margin-bottom:40px;}
.context h2{ font-size:30px; font-weight:400; margin-bottom:10px;}
.footer{ width:1200px; text-align:center; line-height:2.2em; color:#aaa; font-size:14px; padding-bottom:10px;}
</style>
</head>
<body>
<div class="header">
<div class="hdtext">
<a href="@" class="hdleft">Gulp中文网</a>
<ul class="hdright">
<li><a href="@">首页</a></li>
<li><a href="@">中文文档</a></li>
<li><a href="@">入门指南</a></li>
<li><a href="@">API</a></li>
<li><a href="@">插件开发</a></li>
<li><a href="@">常见问题</a></li>
<li><a href="@">使用技巧</a></li>
</ul>
</div>
</div>
<div class="banner">
<img src="../image/xiaomi/gulp.jpg"/>
<p>用自动化构建工具增强你的工作流程!</p>
<a href="#" class="navbanner">开始使用</a>
</div>
<div class="contant">
<div class="context">
<h2> 易于使用</h2>
<p>通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。</p>
</div>
<div class="context">
<h2> 用构建快速</h2>
<p>利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。</p>
</div>
<div class="context">
<h2> 插件高质</h2>
<p>Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。</p>
</div>
<div class="context">
<h2>易于学习</h2>
<p>通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。</p>
</div>
</div>
<div class="footer">
<p>© Gulp 中文网 2015<br>
京ICP备11008151号 | 京公网安备11010802014853</p>
</div>
</body>
</html>
点赞
26
哪些同学觉得很赞!
lori棒棒糖
觉得很赞
昵昵妹
觉得很赞
潜意式
觉得很赞
龙猫1212
觉得很赞
大大大表哥
觉得很赞
依仔101
觉得很赞
西卡
觉得很赞
一品数码
觉得很赞
热爱生活热爱家
觉得很赞
我叫大帅比
觉得很赞
举报
使用道具
|
回复
共0个回复 最后回复于 2019-3-15 11:12
返回列表
B
Color
Image
Link
Quote
Code
Smilies
高级模式
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖后跳转到最后一页
快速回复
返回顶部
返回列表