CSS的范例

最新推荐文章于 2022-06-24 08:54:18 发布
最新推荐文章于 2022-06-24 08:54:18 发布
阅读量254 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangtaoloving/article/details/40094377
版权
<!DOCTYPE html>
<html>
<head>
<title>作业</title>
<meta charset="utf-8">
<style type="text/css">
        .Div{
          width: 556px;
          height: 455px;
            background-color: #FFFDE4;
          margin: auto;
          padding: 50px;
          padding-top: 0px;




        }
        .div1{
        width: 556px;
        height: 40px;
        position: relative;
        margin-left: 10px;
        }
        .div1-1{
        font-family: Arial;
        color: #26819C;
        line-height: 40px;
       
        }
        .div2{
        width: 556px;
        height: 200px;


        }
        .div2-1{
        float: left; 


        } 
        .div2-2{
            font-size: 12px;
            font-family: Arial;
            font-weight: bold;
            color: #E8CE81;
        }
        .div2-3{
            font-size: 12px;
            font-family: Arial;
            color: #E8CE81;
        }
        .div2-4{
            font-family: Arial;
            color: #7D623D;
            position: relative;
            bottom: 10px;
        }
        .div2-5{
        font-size: 12px;
        font-family: Arial;
        color: #9F3633;
        position: relative;
            bottom: 20px;
           
        }
        .div2-6{
        font-size: 12px;
        font-family: Arial;
        color: #9F3633;
        position: relative;
            bottom: 20px;
        }
        .div2-7{
        font-size: 12px;
        font-family: Arial;
        color: #E8CE81;
        position: relative;
            bottom: 20px;
        
        }
        .div3{
        width: 556px;
        height: 215px;
        }
        .div3-1{
        font-family: Arial;
        color: #408492;
        }
        .div3-2{
            font-size: 12px;
            color:  #E8CE81;
            font-family: Arial;
            position: relative;
            bottom: 10px;
            
        }
        .div3-3{


            font-family: Arial;
            color: #9F3633;
            position: relative;
            bottom: 5px;
           
        }
        .div3-4{
             font-size: 12px;
            color:  #E8CE81;
            font-family: Arial;
            position: relative;
            top: 10px;
           
        }
        .div3-7{
        padding-top: 20px;
        }
        .div3-5{
            font-size: 16px;
            font-family: Arial;
            color: #9F3633;
            position: relative;
            bottom: 5px;
            
        }


</style>
</head>
<body>
    <div class="Div">
    <div class="div1">
    <h2 class="div1-1">Our Spectrum of Services</h2>
    </div>
    <div class="div2">
       <img src="1.jpg" class="div2-1">
    <span class="div2-2">Donec accumsan porta risus</span>
    <span class="div2-3">Vestibulum sollicitudinibero ut semper commodo.purus enim sollicitudin nulla.dicturn vehicula diam lacus at purus.In egestas</span>
    <h4 class="div2-4">Services</h4>
    <p class="div2-5">⊙ Nam congue quam non augue ivamus porttitor</p>
    <p class="div2-6">⊙Jam aongue buam n augue famus</p>
    <p class="div2-7"><b>Pellentesque dolor.</b>Nunc congue est in ante maitlis ultrices.liquam erat Nam congue quan non augue</p>
    </div>
    <div class="div3">
    <h2 class="div3-1">Testimonial</h2>
    <span class="div3-2">“<b>Nullam vel justo. Mauris viverra mattis neque.</b> Phasellus feugiat pede ut mauris uis orcies tibulum eleifend. Donec est purusiaculis acauctorNullam vel justo. Mauris viverra mattis neque. Phasellus feugiat pede ut mauris. Duis orci</span>
    <div>
      <img src="2.jpg">
      <span class="div3-3">by David Jackson</span>
    </div>   
    <span class="div3-4"><b>“Vel justo. Mauris viverra Matis neque asellus feugiat pede ut mauris neque asellus feugiat pede ut mauris uis orcies tibulum</b> eleifend Donecest purusiaculis acaudorNullam vel justo. Mauris viverra matlis neque. Phasellus fegiat pede ut mauris</span>
    <div class="div3-7">
      <img src="2.jpg">
      <span class="div3-5">by Tom Sam</span>
    </div>
    </div>
    </div> 
</body>
</html>
枫叶-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS-200个小案例（一）
qq_55154022的博客
12-15 2939
最近我在youtube上跟着大神学习200个CSS小案例，作者Online Tutorials 编码的内容很实用，案例中涉及定位、变换、动画等概念，适合进一步学习和巩固CSS知识，能帮助我们实现页面的特效。
CSS的案例
ChengMeng11的博客
03-28 296
1、基本用法： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /* 1.内部样式（并没有实现样式与内部的分离） */ p{ color:red; ...
【CSS实例】
qll123的专栏
02-21 2581
学习目标： css样式学习、总结，知识巩固 学习内容： 在这里我将会发布一些自己学习过程中完成的css实例，可能是跟着网上学习的练习作品，也可能是自的随意的一个想法。每个作品中会列出编写思路，和编写过程中出现的问题。 目的就是巩固css的基础知识，防止遗忘 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 一、css画时钟 1、涉及到的css技术 利用css绘制圆形 .circle{ ...
css文件范例,CSS-文件的格式样例代码.pdf
weixin_42364780的博客
08-04 839
CSS文件的格式样例代码p {text-indent:2em; }body {font-family:"宋体";font-size:9pt;color:#000000; margin-top:0px;margin-right:0px; margin-bottom:0px; margin-left:0px}table {font-family:"宋体";font-size:9pt; line-hei...
css文件范例,CSS风格（Style with CSS） - GWT 入门教程
weixin_29491635的博客
08-04 362
GWT小部件依赖于级联样式表(CSS)来实现视觉样式。 默认情况下，每个组件的类名是gwt-《classname》 。例如，Button小部件的默认样式为gwt-Button ，类似的方式TextBox widgest的默认样式为gwt-TextBox 。为了给所有按钮和文本框添加更大的字体，您可以将以下规则放在应用程序的CSS文件中.gwt-Button { font-size: 150%;...
CSS 示例
Canyun3821的博客
06-24 483
CSS学习
CSS案例
ho622的博客
03-27 225
DAY1 案例1 01.CSS的语法.html <!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <title>Doucment</title> <style> p{ color:red; } h2{ ...
CSS例子.pdf
11-27
在这个例子中，我们可以看到多个CSS技术的应用，包括盒模型、浮动、定位、列表样式、背景图片、链接样式以及颜色和边框的设置。 1. 盒模型：CSS的盒模型是理解元素尺寸计算的关键。在这个例子中，`margin` 和 `...
一个简单的html-css例子
07-01
HTML（HyperText Markup Language）和CSS...学习并实践这个例子，你可以更好地理解HTML和CSS如何协同工作，为网页创建美观的布局和视觉效果。同时，也可以尝试修改代码，探索更多可能性，提升自己的前端开发技能。
2024情人节贺卡-html+css例子
02-05
2024情人节贺卡-html+css实现例子代码，可以根据祝福话语更改例子里边的祝福语。
20多个CSS样式表精选案例（实用、常用案例）
08-24
个人精心整理收藏，值得推荐！包括《网页设计标准尺寸》文档 搜索引擎 DIV层居中 无图片实现圆角框 精典布局等实用案例！无论新手老手都值得收藏！
CSS button例子
05-31
本篇文章将深入探讨“CSS button例子”这个主题，通过分析提供的文件“32、分享50个CSS超炫丽button样式代码下载”，我们将探索多种CSS技术来创建吸引人的按钮。 1. **基础样式**：CSS的基础按钮样式通常涉及`...
2024新年贺卡-html+css例子代码
02-05
2024新年贺卡-html+css实现例子代码，可以根据祝福话语更改例子里边的祝福语。
CSS经典案例
热门推荐
Within的博客
07-19 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;start&lt;/title&gt; &lt;style&gt; body {background-color:tan;} h1 {color:maroon;font-size:20pt;te
一个简单css例子
幸福诗歌的博客
04-29 5143
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css讲解</title> <link rel="stylesheet" href="style.css"> <style> /* body { color: #000; background: #fff; ma
简单的css样式表范例（一）
clare504的专栏
10-14 1879
css是指层叠样式表，用来进行网页风格设计。采用css技术能够更加精确、有效的控制页面的布局、字体、颜色、背景和其他效果实现。 下面就做一个简单的把外部css文件嵌套在html中的范例： 首先建立一个完整的html网页，在这里文件名为poetry1.html CSS样式表范例
22个常用的css例子
MYF110的博客
05-20 1231
1.简单又好的 Blockquote 样式CSS代码如下: blockquote { background:#f9f9f9; border-left:10px solid #ccc; margin:1.5em 10px; padding:.5em 10px; quotes:"\201C""\201D""\2018""\2019"; } blockquote:before ...
常用的css小例子
weixin_41970780的博客
11-17 536
常用的css小例子 第一种效果： 录制GIF有点卡，但是你单纯运行代码美滋滋哦！ 上代码： <span class="shake">弹</span> <style> .shake{ width:40px; height:40px; display:block; background:lightgreen; border-radius:50%; margin:5px; color:#fff; font-siz
开题报告达达宠物认领信息网站的设计与实现 已通过开题答辩的.docx
最新发布
07-25
宠物认领信息网站的主要目的是为寻找宠物的失主和寻找新家的宠物提供一个在线的信息交流平台。通过这个平台，失主可以发布失宠信息，寻找走失或遗弃的宠物；而救助人或组织则可以发布待领养的宠物信息，为那些无家可归的宠物寻找一个永久的归宿。 这样的网站通常会提供一个详细的宠物数据库，包括照片、品种、年龄、健康状况等信息，以便让失主能够方便地找到自己的宠物。同时，网站还会提供一些相关的服务，如失主与救助人之间的在线交流、宠物匹配推荐、领养手续办理等，以帮助双方顺利完成宠物的认领和领养过程。 宠物认领信息网站的目的在于提高失宠找到宠物的几率，减少流浪宠物的数量，并为那些无家可归的宠物提供一个温馨的新家。同时，网站还能促进社会对流浪宠物的关注和保护，提高人们的动物保护意识。
网页 前端 许多textbox+label如何在页面均匀分布 css 例子
05-28
下面是一个例子： HTML代码： ```html <label for="input1">Label 1: <label for="input2">Label 2: <label for="input3">Label 3: <label for="input4">Label 4: ``` CSS代码： ```css ....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值