简单切个图

最新推荐文章于 2023-04-17 22:01:52 发布
最新推荐文章于 2023-04-17 22:01:52 发布
阅读量331 收藏
点赞数
分类专栏： 学习笔记 文章标签： html+css切图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kly_newera/article/details/51112595
版权

多练多看

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="简单页面">
<title>小小练习下</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
  <div id="left">
    <ul id="nav_1">
        <li>编辑推荐</li><hr/>
        <li>最受欢迎</li><hr/>
        <li>最新启动</li><hr/>
        <li>快要结束</li><hr/>
        <li>成功案例</li>
    </ul>
    <ul id="nav_2">
        <li>音乐  |<span>Music</span></li>
        <li>电影  |<span>Movie</span></li>
        <li>戏剧  |<span>Music</span></li>
    </ul>
  </div>

  <div id="right">
     <div class="main">

         <h1>音乐/ Music</h1>
         <img src="image/008.jpg" alt="JJ" > 
            <div class="background">
            <h4>华人音乐</h4>
            <h5>创建人：火火</h5>
            <p>关注和支持华人的文化创意从这里开始!</p>
            <div class="runtime">5000/9000</div>
            <div class="time">还有9天</div>
            </div>
        </div>
        <div class="main">

         <h1>音乐/ Music</h1>
         <img src="image/008.jpg" alt="JJ" >
            <div class="background">
            <h4>华人音乐</h4>
            <h5>创建人：火火</h5>
            <p>关注和支持华人的文化创意从这里开始!</p>
        <div class="runtime">5000/9000</div>
            <div class="time">还有9天</div>
            </div>
        </div>
        <div class="main">

         <h1>音乐/ Music</h1>
         <img src="image/008.jpg" alt="JJ" >
            <div class="background">
            <h4>华人音乐</h4>
            <h5>创建人：火火</h5>
            <p>关注和支持华人的文化创意从这里开始!</p>
            <div class="runtime">5000/9000</div>
            <div class="time">还有9天</div>
            </div>
        </div>
        <div class="main">

         <h1>音乐/ Music</h1>
         <img src="image/008.jpg" alt="JJ" >
            <div class="background">
            <h4>华人音乐</h4>
            <h5>创建人：火火</h5>
            <p>关注和支持华人的文化创意从这里开始!</p>
            <div class="runtime">5000/9000</div>
            <div class="time">还有9天</div>
            </div>
        </div>
        <div class="main">

         <h1>音乐/ Music</h1>
         <img src="image/008.jpg" alt="JJ" >
            <div class="background">
            <h4>华人音乐</h4>
            <h5>创建人：火火</h5>
            <p>关注和支持华人的文化创意从这里开始!</p>
            <div class="runtime">5000/9000</div>
            <div class="time">还有9天</div>
            </div>
        </div>
        <div class="main">

         <h1>音乐/ Music</h1>
         <img src="image/008.jpg" alt="JJ" > 
            <div class="background">
            <h4>华人音乐</h4>
            <h5>创建人：火火</h5>
            <p>关注和支持华人的文化创意从这里开始!</p>
            <div class="runtime">5000/9000</div>
            <div class="time">还有9天</div>
            </div>
        </div>
  </div>
  </div>
</div>
</body>
</html>
*{
    margin:0;
    padding:0;
    font-size:12px;
    font-family: arial, 'Microsoft YaHei', '微软雅黑', sans-serif;
}
li{
    list-style-type:none;
}
#container{
    height:950px;
    width:1100px;
    background:black;
    margin:0 auto;
}
#left{
    height:350px;
    width:178px;
    background-color:#CCC;
    float:left;
    margin-top:10px;
    margin-left:120px;
    text-align:center;
}
#nav_1{
    height:200px;
    width:170px;
    background-color:#fffafa;
    margin-top:4px;
    margin-left:4px;
}
#nav_1 li{
    list-style: none;
    margin:0px 10px 10px 10px;line-height: 28px;font-size: 15px;font-weight:500;color:#483d8b;
}
hr{
    height:2px; width:130px;margin:0 auto;color:#CCC;border:none;border-top:2px solid;}
}

#nav_2{list-style: none;}
#nav_2 li{display: block;height:25px;margin:15px 22px 0px 22px;letter-spacing:1px;background-color:#808080;font-size:15px;}
#nav_2 li span{margin:10px;color:white;}
#right{
    width: 700px;height:900px;margin:10px 30px 0px 15px;float:left;background-color:white;
}
.main{
    height:400px;width:200px;background-color:#CCC;margin:20px 10px 10px 20px;float:left;position:relative;
}
img{height:244px;width:180px;margin-left:10px;}
h1{
    color:white;font-size:18px;padding-left:10px;
}
.background{
    background-color:white;height:120px;;width:180px;position:absolute;bottom:10px;left:10px;
}
h4{color:red;font-size:19px;padding-left:4px;}
h5{font-weight:200;padding-left:4px;color:#808080}
p{
    padding-left:4px;font-weight:700;font-size:13px;
}
.runtime{width:100px;
margin-left:2px;margin-top: 5px;padding-top:5px;height:25px;background-color:rgb(190,190,190);float: left;text-align: center;font-size: 18px;}
.time{width:76px;
margin-right:2px;height:30px;margin-top:5px;background-color:rgb(215,215,215);float: right;text-align: center;font-size: 18px; }

这里写图片描述

火火的烧火棍
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
切图div+css
05-31
切图div+css
Leaflet 瓦片地图切割工具 用于切割本地图片
09-14
Window系统 Leaflet 瓦片切割工具，用于切割本地图片，按自己需求切割。切割完成后直接可用于地图展示，使用简单傻瓜操作
css布局与“切图”
j2ee开发的专栏
12-03 316
欢迎访问: www.ptcms.cnCSS布局与“切图” 很多朋友问到关于在网页设计中，特别是使用CSS布局的时候，如何切图的问题，今天就来说说这个问题。 在过去，使用表格布局的时候，通常是整个页面在Photoshop或者Fireworks中设计好，然后使用“切片”工具，在页面上分割，生成有表格搭建的HTML，然后再把需要的图像留下来，把需要填写文字的单元格中的图像去掉，填上相应的文字...
css切图
qq_29253285的博客
06-07 475
http://www.missyuan.net/school/ps_2014/photoshop_13773.html
CSS切图
落叶翩翩的CSDN博客
12-10 1250
CSS 切图 （只显示一张大图片的其中一部分）       最重要的是设置backgroud-position和块级元素的width和height 截图如下： html和css代码如下： CSS 切图 <!-- CSS 切图 最重要的是设置backgroud-position和块级元素的width和height --> .clear{ cl
css切图教程
weixin_30274627的博客
08-20 272
1、首先开始分析网页的结构，一个网页一般分为三个大的部分:顶部header,内容content,页脚footer 顶部header: 广告宣传banner; 导航栏nav; 内容content： 两列布局左部left;右部right; 页脚footer 2、以下是一个简单的模板，往里面套样式就可以了 <!DOCTYPE html> <html ...
批量切割图片
04-25
快速切割大图片为若干个子图片，可重叠切，可平铺切，代码简单易懂，如有疑问可联系1028178968@qq.com
php图片轮切效果图片切换
05-12
实现图片定时轮切效果，有较好的缓冲，不是简单轮切
CSS3实现炫酷的切片式图片轮播效果
12-13
今天我们学习如何使用CSS创建一个炫酷的图片轮播组件。它的原理简单的说就是通过单击标签元素（label）来切换背景图像和动画效果。核心是使用与标签关联的单选按钮和使用通用兄弟选择器来定位每张图片。 我们要实现...
CSS - 切割图片的方法
快乐
03-04 321
       切割图片这里不是真正的切割，只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式，一是做为某一元素的背景图片，二是用img元素的属性。 方法一：用CSS中元素的background : background-color || background-image || background-repeat || background-a...
CSS（PS切图、学成在线案例）
matrix_xiaobai的博客
08-21 675
PS有很多的切图方式：图层切图、切片切图、PS插件切图最简单的切图方式：右击图层 快速导出为PNG但是很多情况下，我们需要合并图层再导出：1.利用切片工具选中图片2.导出选中的图片Cutterman是一款运行在Photoshop中的插件，能够自动将你需要的图层进行输出，以替代传统的手工“导出web所用格式”以及使用切片工具进行挨个切图的繁琐流程1.学成在线PSD文件2.开发工具：PS、cutterman插件、vscode、chrome我们本次采取结构与样式相分离思想：1.创建study目录文件夹（用来
CSS---PS切图---7.22
weixin_50768118的博客
07-22 133
常见的图片格式、PS切图
【CSS】13.页面切图和布局实现
weixin_46293452的博客
04-17 515
LOGO 部分NAV 布局LEFT - SIDEBAR：左边栏布局CONTENT：内容布局RIGHT - SIDEBAR：右边栏布局。
css(五)项目实战，ps切图
qq_46199553的博客
08-09 1028
PS 切图 4.1 常见的图片格式 jpg图像格式： JPEG（.JPG）对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格 式的 gif图像格式：GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景 和动画效果, 实际经常用于一些图片小动画效果. png图像格式是一种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保 持透明背景. 如果想要切成背景透明的图片,请选择png格式. PSD图像格式PSD格式是Photoshop的.
15.前端笔记-CSS-PS切图
虽然但是
12-01 286
ps切图
CSS中常见图片格式以及PS切图及相关案例
weixin_51415327的博客
08-17 450
1.图片格式 2. PS切图 2.1 图层切图 关注点：直接通过移动工具来获取所需图片并可以进行导出png。 注意：由于实际生活中很多图都是复合图，故当我们获取该图时需要合并图层。 2.2 切片切图 注意：gift和png是透明底，故当我们想要透明底的时候，图片格式采用png。如果我们需要这种图片的时候首先先将总图层的背景给去掉。 重点经验：取消切片快捷键（Crtl+H） 2.3 PS插件切图 ...
divcss布局实例之完整切图
陈飞老师
07-30 734
divcss布局实例之完整切图 今天我要带领大家使用DIV+CSS切一个普通企业网站的首页，同时也是考量大家对之前所学CSS知识的一个理解程度。 首先大家先看一下咱们要完成的网页切图图片如下所示： 我们先分析一下这个网页布局，大的部分我们可以分为头部，导航部分，BANNER部分，然后是主体内容区，最后是尾部，如下图。而在主体内容区域按照布局是一个典型的两列布局，然后在左侧内容区域又分为一个两列布局。我们可以把它理解为两列套两列 然后在开始动手编代码： 第一步:大家可能都知道我们的HTML标
完成css的切图 图片任意,css切图是什么意思
weixin_30394019的博客
08-03 268
css切图是指DIV CSS开发的意思，表示从一张网页美工图切片到HTML代码开发与CSS样式开发，完成HTML静态网页；css切图包含两部分，分别是：1、网页美工图素材切出；2、DIV+CSS代码开发。本文操作环境：windows7系统、css3版本，Dell G3电脑。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。下面我们...
web前端从入门到放弃
apple_73086122的博客
10-19 953
web前端初学
用c语言实现简单的图片切割
最新发布
05-05
以下是一个简单的示例代码，可以实现将一张图片水平切成两份的功能： ```c #include #include typedef struct { unsigned char r, g, b; } RGB; int main() { FILE *fp = fopen("input.bmp", "rb"); if (fp ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值