百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

web开发源代码案例4-css应用 css 开发

yuyutoo 2024-10-27 17:03 2 浏览 0 评论

web开发源代码案例4-css应用

原创2022-07-21 22:07·小猴web开发

本次案例使用了css多个属性

font-family 设置字体

font-size 字号大小

font-weight 字体粗细

font-style 字体样式

font 复合属性写法

color 文本颜色

text-align 文本对齐

text-decoration 文本装饰

text-indent 文本缩进

line-height 行间距

外部样式表方式

如果还在学习web开发的你,可以一起来学习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>web开发源代码案例4-css应用</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    body {
      font: 16px/28px 'Microsoft YaHei';
    }
    h1 {
      font-weight: 400;
      text-align: center;
    }
    a {
      text-decoration: none;
    }
    p {
    text-indent: 2em;
    }
  </style>
</head>
<body>
  <h1>励志的话</h1>
  <div class="gray">2019-07-03 16:31:47 来源: <a href="#">我</a>    
    <input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button>
  </div>
  <hr>
  <p>1. 另一种是漠视一切的意义,包括青春的意义,因为那就是青春的本质。——陈绮贞  2. 青春不是人生的一段时期,而是心灵的一种状况。——塞涅卡  3. 世界上是先有爱情,才有表达爱情的语言的,在爱情刚到世界上来的青春时期中,它学会了一套方法,往后可始终没有忘掉过。——杰克·伦敦</p>

  <h4>励志的话</h4>
  <p class="pic">
    <img src="images/猴犀利LOGO.jpg" alt="地图" >
  </p>
  <p>青春像只唱着歌的鸟儿,已从残冬窗里闯出来,驶放宝蓝的穹窿里去了。——闻一多</p>
  <p>一个人只要他有纯洁的心灵,无愁无恨,他的青春时期,定可因此而延长。——司汤达</p>
  <p>白首壮心驯大海,青春浩气走千山。——林伯渠</p>
  <p>人生最大的感叹是:年轻的激情是从未实现;年老的追忆是从没发生。勇气是青年人漂亮的装饰。假若人生下来就是中年,然后再渐渐年轻起来,那样,他就会珍惜一切时光,决不会再无谓的事情上消耗自己。风华正茂夜晚给老年人带来平静,给青年人带来希望。——萧伯纳</p>
  <p>一个人年轻的时候年轻,固然有福,可是把自己的青春保持到进入坟墓为止,那就更加百倍地有福。——契诃夫</p>

  <p class="footer">本文来源:网络</p>
</body>
</html>

css代码块

.gray {
    color: #888;
    font-size: 12px;
    text-align: center;
  }
  .search {
    color: #666;
    width: 170px;
  }
  .btn {
    font-weight: 700;
  }

  .pic {
    text-align: center;
  }
  .footer {
    color: #888;
    font-size: 12px;
  }

相关推荐

MySQL5.5+配置主从同步并结合ThinkPHP5设置分布式数据库

前言:本文章是在同处局域网内的两台windows电脑,且MySQL是5.5以上版本下进行的一主多从同步配置,并且使用的是集成环境工具PHPStudy为例。最后就是ThinkPHP5的分布式的连接,读写...

thinkphp5多语言怎么切换(thinkphp5.1视频教程)

thinkphp5多语言进行切换的步骤:第一步,在配置文件中开启多语言配置。第二步,创建多语言目录。相关推荐:《ThinkPHP教程》第三步,编写语言包。视图代码:控制器代码:效果如下:以上就是thi...

基于 ThinkPHP5 + Bootstrap 的后台开发框架 FastAdmin

FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架。主要特性基于Auth验证的权限管理系统支持无限级父子级权限继承,父级的管理员可任意增删改子级管理员及权限设置支持单...

Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示

本文实例讲述了Thinkphp5.0框架实现控制器向视图view赋值及视图view取值操作。分享给大家供大家参考,具体如下:Thinkphp5.0控制器向视图view的赋值方式一(使用fetch()方...

thinkphp5实现简单评论回复功能(php评论回复功能源码下载)

由于之前写评论回复都是使用第三方插件:畅言所以也就没什么动手,现在证号在开发一个小的项目,所以就自己动手写评论回复,没写过还真不知道评论回复功能听着简单,但仔细研究起来却无法自拔,由于用户量少,所以...

ThinkPHP框架——实现定时任务,定时更新、清理数据

大家好,我是小蜗牛,今天给大家分享一下,如何用ThinkPHP5.1.*版本实现定时任务,例如凌晨12点更新数据、每隔10秒检测过期会员、每隔几分钟发送请求保证ip的活性等本次分享,主要用到一个名为E...

BeyongCms系统基于ThinkPHP5.1框架的轻量级内容管理系统

BeyongCms内容管理系统(简称BeyongCms)BeyongCms系统基于ThinkPHP5.1框架的轻量级内容管理系统,适用于企业Cms,个人站长等,针对移动App、小程序优化;提供完善简...

YimaoAdminv3企业建站系统,使用 thinkphp5.1.27 + mysql 开发

介绍YimaoAdminv3.0.0企业建站系统,使用thinkphp5.1.27+mysql开发。php要求5.6以上版本,推荐使用5.6,7.0,7.1,扩展(curl,...

ThinkAdmin-V5开发笔记(thinkpad做开发)

前言为了快速开发一款小程序管理后台,在众多的php开源后台中,最终选择了基于thinkphp5的,轻量级的thinkadmin系统,进行二次开发。该系统支持php7。文档地址ThinkAdmin-V5...

thinkphp5.0.9预处理导致的sql注入复现与详细分析

复现先搭建thinkphp5.0.9环境...

thinkphp5出现500错误怎么办(thinkphp页面错误)

thinkphp5出现500错误,如下图所示:相关推荐:《ThinkPHP教程》require():open_basedirrestrictionineffect.File(/home/ww...

Thinkphp5.0极速搭建restful风格接口层

下面是基于ThinkPHPV5.0RC4框架,以restful风格完成的新闻查询(get)、新闻增加(post)、新闻修改(put)、新闻删除(delete)等server接口层。1、下载Thin...

基于ThinkPHP5.1.34 LTS开发的快速开发框架DolphinPHP

DophinPHP(海豚PHP)是一个基于ThinkPHP5.1.34LTS开发的一套开源PHP快速开发框架,DophinPHP秉承极简、极速、极致的开发理念,为开发集成了基于数据-角色的权限管理机...

ThinkPHP5.*远程代码执行高危漏洞手工与升级修复解决方法

漏洞描述由于ThinkPHP5框架对控制器名没有进行足够的安全检测,导致在没有开启强制路由的情况下,黑客构造特定的请求,可直接GetWebShell。漏洞评级严重影响版本ThinkPHP5.0系列...

Thinkphp5代码执行学习(thinkphp 教程)

Thinkphp5代码执行学习缓存类RCE版本5.0.0<=ThinkPHP5<=5.0.10Tp框架搭建环境搭建测试payload...

取消回复欢迎 发表评论: