响应式web开发许愿墙

index.html

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>许愿墙</title><link rel="stylesheet" href="css/style.css">
</head><body><div class="container"><div class="zz" style="background:radial-gradient(300px, #aaffff 10%, #aaffff 1%, #d0d1ff 30%)"><p>路漫漫其修远兮...</p><span>关闭</span>   <!--span行内标签，一行可以被span划分成好几个区域-->                  </div><div class="item" style="background: #F8B3D0;"><p>I have a dream...</p><span>关闭</span></div><div class="qq" style="background: #BBE1F1;"><p>既然选择了远方，便只顾风雨兼程...</p><span>关闭</span></div></div><div class="container"><div class="yy" style="background:linear-gradient(to bottom, #ff95a0 0%, #a1ffcc 120%);"><p>抬头有星光</p><span>关闭</span>   <!--span行内标签，一行可以被span划分成好几个区域-->                  </div></body></html>

style.css

html {height: 100%;
}body {background: linear-gradient(to bottom, #CBEBDB 0%, #aaaaff 120%);height: 100%;margin: 0;
}.container {margin: 0 auto;padding: 50px 0;width: 720px;overflow: hidden;
}.container p {height: 70px;margin: 30px 10px;overflow: hidden;word-wrap: break-word;    /*允许长单词换到下一行*/line-height: 1.5;
}.container span {text-decoration: none;color: white;position: relative;left: 150px;font-size: 14px;
}.item {background: #E3E197;width: 200px;height: 200px;line-height: 30px;box-shadow: 0 2px 10px 1px rgba(26, 26, 79, 0.2);float: left;margin: 0 20px;border-bottom-left-radius: 10px 100px;border-bottom-right-radius: 500px 30px;border-top-right-radius: 5px 100px;
}
.yy {background: #E3E197;width: 200px;height: 200px;line-height: 30px;box-shadow: 0 2px 10px 1px rgba(26, 26, 79, 0.2);float: left;margin: 0 20px;border-bottom-left-radius: 50px 100px;border-bottom-right-radius: 50px 100px;border-top-right-radius: 50px 100px;border-top-left-radius: 50px 100px;
}
.zz {background: #E3E197;width: 200px;height: 200px;line-height: 30px;box-shadow: 0 2px 10px 1px rgba(26, 26, 79, 0.2);float: left;margin: 0 20px;border-bottom-left-radius: 80px 100px;border-bottom-right-radius: 80px 100px;border-top-right-radius: 80px 100px;border-top-left-radius: 80px 100px;
}
.qq {background: #E3E197;width: 200px;height: 200px;line-height: 30px;box-shadow: 0 2px 10px 1px rgba(26, 26, 79, 0.2);float: left;margin: 0 20px;border-bottom-left-radius: 100px 100px;border-bottom-right-radius: 100px 100px;border-top-right-radius: 10px 100px;border-top-left-radius: 10px 100px;
}

响应式web开发许愿墙相关推荐

前端web：响应式Web开发优缺点总结
因为越来越多的智能移动设备(mobile,tabletdevice)加入到互联网中来,移动互联网不再是独立的小网络了,而是成为了Internet的重要组成部分.响应式网络设计(RWD/AWD)的出现, ...
Bootstrap响应式Web开发(一)
Bootstrap响应式Web开发(一) 目录 Bootstrap响应式Web开发(一) 一.Bootstrap的概念.特点及组成二.浏览器三.Visual Studio Code 四.移动端开发 ...
响应式web开发网页案例 ——29款表单模板
如果你正在寻找有趣的响应式web开发网页案例,那你找对地方了.本文与大家分享一下,点击图片即可下载. 1. [网页响应式开发]粉红简洁登录框表单模板大小:124 KB 下载地址:http://www ...
Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记01--基础入门 Bootstrap响应式Web开发笔记02--移动端页面布局 Bootstrap响应式Web开发笔记03--Bootstrap栅格系统 Boot ...
响应式web开发chapter2/demo03
字体文件/百度网盘链接矢量图的插入:还是与chapter2/demo02连接css字体文件的方式一样.css文件内包含了矢量图. 保证css文件与demo03文件在一个文件夹内. <!DOCT ...
【全栈开发】精通 MEAN: 使用 MEAN 和 UGLI CRUD 实现响应式 Web 设计
您现在已经了解了 MEAN 应用程序的机制,接下来我们将对第一期文章中创建的 MEAN.JS应用程序进行定制.我们在第二期文章中对该应用程序有了一个大致的了解.在第三期文章中,我将演示该应用程序的基本 ...
前端web：响应式网站开发的现状你了解吗？
当企业对网络营销有了更深的认识时,不管是大企业还是小企业,都已经建立了自己的个性化响应网站,都希望利用互联网这一新形态的市场,以及网络营销的新型营销模式.如今建立响应式网站也是一种趋势,利用互联网的优 ...
[译] 响应式 Web 应用（一）
本文由 Shaw 发表在 ScalaCool 团队博客. 原书 www.manning.com/books/react- 第一章:你是说「响应式」? 本章内容响应式应用及其起源为什么响应式应用是必 ...
十大响应式Web设计框架
2019独角兽企业重金招聘Python工程师标准>>> 本文将分享十款最佳的响应式Web设计,助你大大简化工作流程. Gumby Framework Gumby 2是建立在Sass基 ...
HTML5和CSS3响应式WEB设计指南译者序
"不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

响应式web开发许愿墙

响应式web开发许愿墙相关推荐

最新文章

热门文章

响应式web开发 许愿墙

响应式web开发 许愿墙相关推荐

最新文章

热门文章

响应式web开发许愿墙

响应式web开发许愿墙相关推荐