手把手教你切图(DIV+CSS)

教程大全  / 只看大图  / 倒序浏览   ©

#楼主# 2020-3-3

跳转到指定楼层

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
~~~~
如果你会切图!请绕行!
~~~~
想学图的,请往下看。
此文有两个假设

1、你会使用ps切图
2、你已学到浮动布局板块《CSS入门选》
~~~~
如果不会PS切图可以留言哈,四种psd切图方法与你分享。
如果不会浮动布局留言哈,得抽一章详细到你懂,只为你。
是不是很感动?。
~~~~
准备开始
ps sub 都打开
见图

手把手教你切图(DIV+CSS)-1.jpg
哇哦!
我们今天只讲一部分,后期可以讲多个模块。
导航就是今天的主题!
那看到图,要怎么开始!
万事开头难!
~~~~
开始之前我们选简单介绍几个知识点
1、网页有内容区,不能完全按设计稿的走。如图,导航的内容就叫内容区,两边的空白是设计的美感。
2、一般网页的宽度为:960,980,1001,1280,1380。我说的是px像素哈。
3、网页的字体正常只有宋体与微软雅黑。
4、网页的字体大小:早期是12px 14px 16px  16是导航部分,最大的字体
5、现在的字体大小:14px 16px  18px
6、块间距为10px  15px  20px 30px  
当然还有很多,网页是有标准的,行业大概是27,28左右。但也要看设计了。
~~~~


完成一个导航,纯蓝色,字体,距离都要与设计稿一样。
先ps 量一下大小。
少侠你量多少呀!
是不是w:968px h:36px?
错。
正常是w:967px  h:40px
默认样式
/**
* @author 象天
* 2010-09-07
*
**/
//\5b8b\4f53
//$yh:'Microsoft Yahei';
body, textarea, input, select, option {
  font-size: 12px;
  color: #333;
  font-family: "Microsoft Yahei","Hiragino Sans GB", tahoma, arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
}
body, h1, h2, h3, h4, h5, h6, blockquote, ol, ul, dl, dd, p, textarea, input, select, option, form {
  margin: 0;
}
ol, ul, textarea, input, option, th, td {
  padding: 0;
}
table {
  border-collapse: collapse;
}
li {
  list-style-type: none;
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block;
}
.clearfix:after {content:'.';display:block;height:0;clear:both;visibility:hidden;}
.clearfix {*zoom:1;}
.clear {
  clear: both;
  height: 0;
  overflow: hidden;
}
a {
  text-decoration: none;
  color: #333;
}
a, textarea, input, select {
  outline: none;
}
textarea {
  overflow: auto;
  resize: none;
}
.img img {
  display: block;
}
a img {
  border: none;
}
//.z-index {
//  position: fixed;
//  _position: absolute;
//  z-index: 999;
//  display: none;
//  overflow: hidden;
//}
.pr {
  position: relative;
}
.pa {
  position: absolute;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
a:hover {
  text-decoration: underline;
}
.m {
  margin: 0 auto;
  width: 960px;
}
.t10 {
  margin-top: 10px;
}
.hide {
  display: none;
}
.show {
  display: block;
}
/**
去ie10 小X
*/
::-ms-clear { display: none;}
::-ms-reveal { display: none;}
/**
placeholder color更改
*/
::-webkit-input-placeholder { /* WebKit browsers */
    color:#ccc;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#ccc;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#ccc;
}HTML标准结构
<!DOCTYPE html>
<html>
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>切图</title>
        <link rel="stylesheet" type="" href="css/index.css">
</head>
<body>
</body>
</html>以上是一个标准结构
下面是版本一:
HTML代码
<div class="nav clearfix">
        <a href="#" class="sp">首页</a>
        <a href="#">学校概况</a>
        <a href="#">新闻公告</a>
        <a href="#">课程设置</a>
        <a href="#">师资力量</a>
        <a href="#">学子风采</a>
        <a href="#">资料中心</a>
        <a href="#">招贤纳士</a>
        <a href="#">联系我们</a>
        <a href="#">留言咨询</a>
</div>CSS样式
.nav {
  width:967px;
  height:40px;
  background:blue;
  margin:50px auto;
}
.nav a {
  float:left;
  height:40px;
  line-height:36px;
  width:94px;
  text-align:center;
  font-size:16px;
  color:#fff;
}
.nav a:hover {
  text-decoration:none;
}
.nav .sp {
  margin-left:36px;
  width:59px;
}



手把手教你切图(DIV+CSS)-2.jpg

手把手教你切图(DIV+CSS)-3.jpg
gif 掩饰 我稍后给出github地址 里带有哈。
版本二(使用三层嵌套的形式)
接下来是还原。
HTML代码
<div class="box2">
        <div class="pub-nav">
                <div class="pub-l">
                        <div class="pub-r clearfix nav2">
                                <a href="#" class="sp">首页</a>
                                <a href="#">学校概况</a>
                                <a href="#">新闻公告</a>
                                <a href="#">课程设置</a>
                                <a href="#">师资力量</a>
                                <a href="#">学子风采</a>
                                <a href="#">资料中心</a>
                                <a href="#">招贤纳士</a>
                                <a href="#">联系我们</a>
                                <a href="#">留言咨询</a>
                        </div>
                </div>
        </div>
</div>CSS代码
.box2 {
  width:967px;
  height:40px;
  margin: 50px auto;
}

.pub-nav {
  height:40px;
  background:url(i/pub-nav.png) repeat-x 0 0;
}
.pub-nav .pub-l {
  height:40px;
  background:url(i/pub-l.png) no-repeat 0 0;
}
.pub-nav .pub-l .pub-r{
  height:40px;
  background:url(i/pub-r.png) no-repeat right 0;
}
.nav2 a {
  float:left;
  height:40px;
  line-height:36px;
  width:94px;
  text-align:center;
  font-size:16px;
  color:#fff;
}
.nav2 a:hover {
  text-decoration:none;
}
.nav2 .sp {
  margin-left:36px;
  width:59px;
}版本三(浮动的形式,为了方式两边是半透明)
HTML代码
<div class="box3 clearfix">
        <div class="pub-left">
        </div>
        <div class="pub-right">
        </div>
        <div class="pub-center nav3">
                <a href="#" class="sp">首页</a>
                <a href="#">学校概况</a>
                <a href="#">新闻公告</a>
                <a href="#">课程设置</a>
                <a href="#">师资力量</a>
                <a href="#">学子风采</a>
                <a href="#">资料中心</a>
                <a href="#">招贤纳士</a>
                <a href="#">联系我们</a>
                <a href="#">留言咨询</a>
        </div>
</div>CSS代码
.box3 {
  width:967px;
  height:40px;
  margin: 50px auto;
}
.pub-left {
  float:left;
  width:24px;
  height:40px;
  background:url(i/pub-l.png) no-repeat 0 0;
}
.pub-right {
  float:right;
  width:24px;
  height:40px;
  background:url(i/pub-r.png) no-repeat 0 0;
}
.pub-center {
  margin:0 24px;
  height:40px;
  background:url(i/pub-nav.png) repeat-x 0 0;
}


.nav3 a {
  float:left;
  height:40px;
  line-height:36px;
  width:94px;
  text-align:center;
  font-size:16px;
  color:#fff;
}
.nav3 a:hover {
  text-decoration:none;
}
.nav3 .sp{
  margin-left:12px;
  width:59px;
}


手把手教你切图(DIV+CSS)-4.jpg


背景图合并的方法的就不演示了哈
当然除了以上的实现方法,也可以用定位,或其他
今天就只分享两种方法了哈
PS:标签的使用,就不各种尝试了哈,直接用A了
最后贴上github地址:https://github.com/llqfront/firstproname.git
分享淘帖
回复

使用道具

您的回复是对作者最大的奖励

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于作者

纵横捭阖804

新手猿

  • 主题

    7

  • 帖子

    7

  • 关注者

    0

Archiver|手机版|小黑屋|云大陆 | 赣ICP备18008958号-4|网站地图
Powered by vrarz.com!  © 2019-2020版权所有云大陆