简单的css代码1

最新推荐文章于 2024-03-08 14:14:04 发布
最新推荐文章于 2024-03-08 14:14:04 发布
阅读量384 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanghaibing0903/article/details/40020563
版权
<!DOCTYPE html>
<html>
<head>
<title>homework</title>
<meta charset="utf-8"/>
<style type="text/css">
.bg{
margin: auto;
width: 292px;
height: 592px;
background: #4FC0E8;
text-align: center;
font-weight: bold;
font-family: calibri;
color: white;
}
.div1{
height: 65px;
border-bottom: solid #3DAED6 2px;
line-height: 65px;
}
.div2{
background: white;
height: 18px;
}
.div3{
height: 175px;
border-bottom: solid #3DAED6 2px;
padding-top: 18px;
padding-left: 10px;
padding-right: 10px;
}
.lab{
position: relative;
top: -19px;
}
.div3_1{
text-align: left;
font-size: 12px;
font-weight: normal;
line-height: 1.5em;
}
.div4{
background-color: #3BAEDA;
padding-left: 15px;
padding-right: 15px;
height: 41px;
line-height: 28px;
padding-top: 14px;
}
.div5{
font-size: 120px;
font-weight: normal;
padding-top: 15px;
padding-bottom: 15px;
}
.im{
position: relative;
left: -15px;
}
input[type="button"]{
border: none;
background: #3BAEDA;
width: 160px;
height: 45px;
color: white;
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="bg">
<div class="div1">LOAD MORE</div>
<div class="div2"></div>
<div class="div3">
<div>
<img src="radio.png" class="im" />
<label class="lab">LOREM IPSUM DOLOR</label>
</div>
<div class="div3_1">
Quisque posuere risus erat at scelerisque felis pulvinar quis. Maecenas arcu lorem, laoreet at dui in,hendrerit mattis mi.Sed eu vehicula lectus felis pulvinar quis. Maecenas arcu lorem, laoreet at posuere risus erat.
<a href="#" style="font-weight: bold;text-decoration: none;color: white;">Read More</a>
</div>
</div>
<div class="div2"></div>
<div style="height:294px;border-bottom: solid #3DAED6 2px;">
<div class="div4">
<img src="left.png" align="left">
<label >WEDNESDAY</label>
<img src="right.png" align="right">
</div>
<div class="div5">26</div>
<div><input type="button" value="ADD EVENT"></div>
</div>
</div>
</body>
</html>
zhanghaibing0903
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
精简css
雙馬程序猿
09-07 610
前端基础：css：1.什么是CSS、2.选择器、3.美化网页元素、4.盒子模型、5.浮动、6.定位、7.动画
简单CSS代码
05-11
这些都是简单的网页代码，适合初学者学习。
一些简单实用的css代码
cjq0403的博客
06-09 283
去除超链接的下划线：text-decoration: none; 去除列表的样式：list-style: none;
简单的css代码2
zhanghaibing0903的专栏
10-12 300
homework1 .bg{ width: 347px; height: 417px; background-color: white; font-family: calibri; text-align: center; margin: auto; } .div1{ background-color: #4FC0E8; height: 100px; border-b
简单易懂的CSS前端代码
hzp666的博客
03-12 938
在30秒内可以被读懂的实用CSS代码片段合集#故事CSSClearfix 清除浮动确保元素自行清除其子元素。注意：这只在你仍然使用float来构建布局时才有用。 请考虑使用灵活布局或网格布局的现代方法。HTML&lt;div class="clearfix"&gt; &lt;div class="floated"&gt;float a&lt;/div&gt; &lt;div class="fl...
html+css代码合集
最新发布
06-17
这个“html+css代码合集”很可能是某位学生在大一下学期学习这两门技术时积累的项目和练习，旨在展示其学习成果。 HTML是网页的结构语言，它定义了网页的基本元素，如标题、段落、链接、图像等。通过使用不同的标签...
css3简单小清新导航特效代码
03-20
总结来说，"css3简单小清新导航特效代码"是一个使用CSS3实现的、具有简洁视觉效果和动态交互的导航菜单模板，适用于各种类型的网站，尤其适合那些追求清新风格和简单操作的设计师和开发者。通过学习和应用这种代码，...
简单CSS博客网页模板
01-14
在`style.css`中，你可以找到定义了页面布局、颜色方案、字体选择以及其他视觉效果的CSS代码。例如，可能有定义头部、主体、侧边栏、链接状态等不同部分的样式规则。 `index.html`是网页的主入口文件，它使用HTML...
CSS3简单滑动开关按钮特效代码
03-20
通过以上代码，我们成功地创建了一个基于CSS3的简单滑动开关按钮，它具备了四种不同的安卓样式。这种按钮易于实现，且可以轻松适应不同的设计需求。在实际项目中，你可以根据需要调整颜色、尺寸、动画速度等参数，以...
精简CSS代码
weixin_30467087的博客
04-24 92
精简CSS代码可以帮助减小样式文件的大小，使代码清晰，方便维护。 使用简写属性及默认值 .header { margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; } /* 可以使用简写属性 margin */ .header { margin: 10...
分享一个随手写的简单css效果
qq_49175846的博客
04-01 469
随手制作的简单css效果前言效果图代码HTMLCSS介绍推荐Uigradients中国传统配色网站Colordrop 前言  刚刚随手写了一个网页，添加了一点css的效果，虽然没有很惊艳，但个人认为有点意思，所以就立刻分享给大家了，有兴趣的小伙伴快来看看吧！  本页面实现了鼠标放置、离开的动态效果以及渐变色背景的效果！ 提示：本页面实现环境为Chrome浏览器。 效果图 动图测试 代码  代码分为基本的HTML与CSS，下面给出具体代码。 HTML <!DOCTYPE html> &lt
JavaWeb学习笔记——CSS
超级圈的博客
10-31 162
CSS：页面美化和布局控制 1. 概念： Cascading Style Sheets 层叠样式表 * 层叠：多个样式可以作用在同一个html的元素上，同时生效 2. 好处： 1. 功能强大 2. 将内容展示和样式控制分离 * 降低耦合度。解耦 * 让分工协作更容易 ...
html 和css简单博客代码
AH的博客
02-27 4863
过度动画 -webkit-transition: color 200ms; -o-transition: color 200ms; transition: color 200ms; 阴影 -webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,.2); box-shadow: 0 0 3px 2px rgba(0,0,0,.2)； ...
精简的CSS代码，实现页面样式通用性。
SkyIsland（被电脑折磨死了）
02-01 1328
body{padding:0;margin:0;}body,td,a,p,div,span,font{font-size:12px;color:#000000;line-height:140%;}a{text-decoration:none;}a:hover{text-decoration:underline;}img{border:0;}/********************//*白色字体*
css标准化代码,网页标准化:CSS代码缩写精简实例!
weixin_39889481的博客
08-03 115
网页标准化:CSS代码缩写精简实例!文章作者：网友投稿　发布时间：2008-07-26 19:26:09　来源：网络一些CSS属性允许使用一串值代替许多属性，值使用空格分开。margin,pdding和border-width允许合并margin-top-width, margin-right-width, margin-bottom-width等等，形式像这样：property:top righ...
50种css常用的代码（实用）
m0_64590669的博客
12-15 6082
50种css常用的代码（实用）
值得收藏的7个实用CSS常用的代码（附带效果）
m0_55258023的博客
05-25 1791
值得收藏的5个实用CSS常用的代码（附带效果）
50个常用的css代码
m0_54829066的博客
08-04 1603
47. 设置div的下边距。
常用css样式大全以及css属性代码大全
Java 技术专栏，从入门到精通，熟悉企业级开发
03-08 4193
常用css样式：字体属性、背景属性、区块属性、盒子属性、边框属性、列表属性、定位属性css属性：CSS文字属性、CSS边框空白、CSS符号属性、CSS背景样式、CSS连接属性、CSS框线一览表、CSS表单运用、CSS边界样式。
htmlcss简单网页代码
06-07
下面是一个简单的 HTML 和 CSS 代码示例，用于创建一个包含文本和图片的网页： ``` <!DOCTYPE html> <html> <head> <title>我的网页</title> <style type="text/css"> body { background-color: #f9f9f9; font-family: Arial, sans-serif; font-size: 16px; color: #333; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; } h1 { font-size: 36px; margin: 0; padding: 0; } section { max-width: 800px; margin: 0 auto; padding: 20px; } img { max-width: 100%; height: auto; } </style> </head> <body> <header> <h1>欢迎来到我的网页</h1> </header> <section> <h2>我是谁</h2> <p>我是一名 Web 开发者，喜欢编写代码和设计网站。</p> <h2>我的爱好</h2> <ul> <li>编写代码</li> <li>设计网站</li> <li>阅读技术文章</li> <li>听音乐</li> </ul> <h2>我的照片</h2> <img src="myphoto.jpg" alt="我的照片"> </section> </body> </html> ``` 上面的代码创建了一个简单的网页，包括一个标题、一个头部、一个内容区域和一个照片。其中，CSS 代码定义了页面的样式，包括背景颜色、字体、颜色、边距、内边距等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值