Css初步认识及使用

最新推荐文章于 2021-12-04 17:56:02 发布
最新推荐文章于 2021-12-04 17:56:02 发布
阅读量286 收藏
点赞数
分类专栏： Python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IMPORTRANDOM/article/details/80855411
版权

Css案例

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01_CSS样式使用案例</title>

    <!--css样式分离的第一种方法: 写在页面的head标签里面-->
    <style>
        div {
            width: 250px;
            height: 250px;
            border: 2px solid darkred;
            background-color: floralwhite;
            text-align: center;
        }
        span {
            font-size: 20px;
            color: cornflowerblue;
        }
    </style>
</head>
<body>
<div>
    hello python
</div>
<span>
    hello java
</span>
</body>

</html>


Css类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-CSS类选择器</title>
    <style>
        .div-red{
            width: 500px;
            height: 100px;
            border: 2px solid darkred;
            background-color: floralwhite;
            text-align: center;
        }

        .div-green{
            width: 500px;
            height: 100px;
            border: 2px solid darkred;
            background-color: red;
            text-align: center;
        }
    </style>
</head>
<body>

<h2>案例2:合并列单元</h2>

<table width="500" cellpadding="8" cellspacing="5"  border="'1">

    <caption>主机信息表格</caption>
    <tr>
        <th>主机名</th>
        <th colspan="2">IP地址</th>
    </tr>
<!--<div class="div-red">-->
    <tr class="div-red">
        <td>主机1</td>
        <td>IP1</td>
        <td>IP1</td>
    </tr>
<!--</div>-->
<!--<div class="div-green">-->
    <tr class="div-green">
        <td>主机2</td>
        <td>IP2</td>
        <td>IP2</td>
    </tr>
</div>
    <tr>
        <td>主机3</td>
        <td>IP3</td>
        <td>IP3</td>
    </tr>
    <tr>
        <td>主机4</td>
        <td>IP4</td>
        <td>IP4</td>
    </tr>
</table>
</body>

</html>


属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-属性选择器</title>
    <style>
        input[type="text"]{
            width: 200px;
            background-color: darkgrey;
        }

        input[name="passwd"]{
            width: 200px;
            background-color: darkgrey;
        }

        input[type="submit"]{
            width: 100px;
            background-color: gainsboro;
        }
    </style>
</head>
<body>
<div align="center" style="width: 80%">
    <h3>用户登陆</h3>
    <form action="#" method="get">
        户名:<input type="text" name="username"><br/>
        密码: <input type="password" name="passwd"><br/>
        <input type="submit" value="登陆">
    </form>
</div>
</body>

</html>


左侧导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06左侧导航栏</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: dimgrey;
            width: 12%;
        }

        li a{
            text-decoration: none;
            color: white;
            display: block;
            padding: 20px 40px;
        }

        li a:hover{
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
<ul>
    <li><a href="#">首页</a> </li>
    <li><a href="#">地图</a> </li>
    <li><a href="#">新闻</a> </li>
    <li><a href="#">贴吧</a> </li>
    <li><a href="#">图片</a> </li>
    <li><a href="#">更多</a> </li>
</ul>
</body>

</html>


水平导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-水平导航栏</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            background-color: cadetblue;
            overflow: hidden;
        }

        li {
            float: left;
        }

        li a{
            text-decoration: none;
            color: black;
            display: block;
            padding: 18px 40px;
        }

        li a:hover{
            background-color: blue;
            color: white;
        }

        li a.index{
            background-color: red;
            color: white;
            font-size: 16px;
        }
    </style>
</head>
<body>
<ul>
    <li><a class="index" href="#">首页</a> </li>
    <li><a href="#">地图</a> </li>
    <li><a href="#">新闻</a> </li>
    <li><a href="#">贴吧</a> </li>
    <li><a href="#">图片</a> </li>
    <li><a href="#">学术</a> </li>
    <li><a href="#">音乐</a> </li>
    <li><a href="#">视频</a> </li>
    <li><a href="#">体育</a> </li>
    <li><a href="#">娱乐</a> </li>
    <li><a href="#">登陆</a> </li>
    <li><a href="#">更多</a> </li>
</ul>

</body>
</html>

Thankears
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 加随机数 引用_在CSS中生成随机数
weixin_31967551的博客
12-29 2673
Python部落(python.freelycode.com)组织翻译，禁止转载，欢迎转发。Robin Rendle 于2017年1月11日前几天，我遇到了一个特别有趣的问题。我想用random animation-duration 做一个动画元素。下面是个开始，当然是非随机的。参见：Random numbers CSS(By Robin Rendle)：http://codepen.io/rob...
初步认识CSS
MarrieChen的博客
07-27 245
今天我开始初步认识一些CSS的内容。 首先是CSS的引用方式，一共有四种，首先是style标签引入方式。  选择器{  （样式表）属性：值；  }   还有就是link标签引入。  其中index.css 中的书写方式与上面style内部标签中的格式相同。 还有就是在CSS文件中引入另一个CSS文件。 @import url(test.css),注意一般都写在一个CSS文件的开始
CSS初步--定义和应用样式
RainMcCom的博客
11-06 1049
定义和应用样式 CSS样式由一条或多条以分号隔开的样式声明组成，每条声明包含着一个CSS属性和该属性的值，二者以冒号分隔。 例如：background-color:grey; color:white。1.使用元素内嵌方式：使用全局属性style将样式应用到具体的某些元素上去。例如：<a title="测试内容" href="http://www.baidu.com" style="backgro
web——实验一——html和CSS初步使用
weiwei935707936的博客
04-05 1434
一.对于web开发总的过程的叙述 １.因特网和万维网（具体概念再扩充） 2.基本的结构框架和界面：html(基本和框架),CSS（界面设计）,Javaspcript（动态界面） 3.客户端和服务器端编程：PHP服务器端编程，cookie和session 4.文件：DOM 5.安全基础 6.方式 （有不对和需要扩充的） 二.HTML基础 １.框架必须要用的三个标签： <!...
CSS3随机多背景随机圆角等效果
taotaomin99的博客
06-05 3543
这篇是在廖雪峰的博客学习的一个效果。首先介绍的是，什么是蝉原则？ （百度图片）“蝉原则”，英文称作“cicada principle”，是一种让事物的重复出现符合“自然随机性”的规则，为什么这么说呢？“蝉原则”源自于北美，中国似乎并未有这样的说法，这背后是有有故事的：北美和东亚蝉的种群是不一样的，在东亚蝉的幼虫生活在土中3年5年或7年；但是北美有一种周期蝉（Magicicada），其生命周期为十三
css初步认识
麦田的专栏
12-06 189
css基础css初步认识如何使用？1. 内联方式（行内样式）2. 内部方式（内嵌样式）3. 外部导入方式（外部链入）css常用选择符css2的选择符CSS3中的选择器CSS常用属性1. 颜色属性：color2.字体属性：font3.文本属性4.背景属性：background css初步认识 CSS 指层叠样式表 (Cascading Style Sheets)，控制html元素的显示，美化htm...
CSS学习笔记-CSS初步认识
qq_44653420的博客
12-04 166
CSS初步认识 CSS的介绍 CSS ：层叠样式表 用于设置和布局网页的一种计算机语言，告知浏览器如何渲染解析页面元素 也就是美化网页 配合HTML使用 CSS的组成 选择器：选择HTML元素的方式，可以使用标签名、class属性值、id值等多种方式 样式声明：用于给HTML元素设置具体的样式。格式是 属性名：属性值 格式如下： 选择器{ 属性名：属性值； 属性名：属性值； 属性名：属性值； } h1{ color:red; font-size:5px; } C
前端HTML与CSS初步认识
weixin_34392435的博客
12-06 140
什么是HTML？ HTML： 超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。 超级文本标记语言的定义又是什么？ 超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，...
初步认识css自定义属性
09-22
要使用CSS变量，你需要通过`var()`函数来引用它们。例如： ```css .box { --box-color: #4d4e53; --box-padding: 0 10px; padding: var(--box-padding); } .box div { color: var(--box-color); } ``` ...
css和javascript初步认识教程
10-31
**CSS初步认识** CSS（Cascading Style Sheets）是一种样式表语言，用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档的呈现。它控制着网页的布局和外观，让网页的设计更加丰富多彩。 1. **CSS基础概念** ...
初步认识JavaScript函数库jQuery
12-09
CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 向您的页面添加 jQuery 库 jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 可以通过下面的标记把 ...
CSS学习中的瓶颈期深入分析
09-25
在CSS学习过程中，瓶颈期通常出现在初期阶段，也就是学习者对CSS有了初步了解，能够根据设计图构建页面，掌握了一些CSS hack技巧。这个阶段看似已经掌握了CSS的基础，但实际上只是触及了CSS庞大知识体系的冰山一角。...
Python函数及练习题
热门推荐
IMPORTRANDOM的博客
05-10 2万+
函数定义与使用 1. 无参数的函数;# # 定义函数， 并不会执行;# def hello():#     # 函数体#     print("hello")# # 调用函数# hello()# print(len("hello"))# print()# 2. 带有参数的函数def fun1(name):    # name = "fentiao"    # 定义函数时的变量称为形式参数， 变量名...
Python字符串及练习题
IMPORTRANDOM的博客
05-10 9499
1.变量名命名规则# 中文是可以作为变量名的，但不建议姓名 = "hello"print(姓名)# 变量名可以由字母，数字或者下划线;# 变量名只能以字母或者下划线组成;# 变量名不能是python的关键字: eg: if, elif, else,#   eg: while, for, break,continue,passa_1hello = "hello"print(a_1hello)# he...
学生管理系统及练习题
IMPORTRANDOM的博客
05-10 3021
用户登陆系统, 分为管理员登陆和学生登陆；1.管理员登陆， 可以操作：管理员密码修改; 添加学生的信息; 删除学生的信息; 修改学生的信息; 查询学生的信息; 根据学号查找； 根据姓名查找; 查看所有学生的信息; 退出系统; 2.学生登录: 查询个人信息; 修改信息； 修改姓名； 修改年龄； 修改密码; 学生信息包括: 学号， 姓名， 性别， 班级， 出生年月， 用户名， 密码 学生用户名和学...
停车管理系统
IMPORTRANDOM的博客
05-25 1724
1. 基础版本:属性:    停车场最多停车数; max_car;    当前停车数;cur_car;    当前停车列表; car_list = []方法：    停车：park()            1). 如果没有达到最多停车数，则允许停车；            2). 如果没有达到最多停车数，则允许停车；    出停车场：exit()            1). 判断该汽车是否进入...
爬取中国所有银行官网网址信息
IMPORTRANDOM的博客
06-24 1591
爬取中国所有银行官网网址信息,并保存在文档中。from urllib import requestfrom urllib.request import urlopenimport reurl = 'http://www.cbrc.gov.cn/chinese/jrjg/index.html'def get_file_content(filName):    with open('bank.txt'...
BootStrap css
最新发布
03-30
它提供了一套容易使用的 CSS 类型和组件，使得开发人员可以快速地构建现代化、响应式的网站和应用程序。 2.2. BootStrap 的安装 要使用 Bootstrap，首先需要在项目中引入相关的 CSS 和 JS 文件。在官方网站或中文...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值