CSS样式1

最新推荐文章于 2024-07-17 15:34:38 发布

hyhyxyx

最新推荐文章于 2024-07-17 15:34:38 发布

阅读量48

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/hyhyxyx/article/details/130894608

版权

CSS样式1

CSS,专门用来“美化”标签。

基础CSS，写简单的页面&看懂&改
模板，调整和修改

3.1快速了解

1.在标签上

<img src='...' style="height:100px"/>

<div style="color:red;">xyx</div>

2.在head标签中写style标签（*）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .c1{
            color:red;          # 常用写法
        }
    </style>
</head>
<body>
  <h1 class='c1'>用户登录</h1>
  <h1 class='c1'>用户登录</h1>
  <h1 class='c1'>用户登录</h1>
  <h1 class='c1'>用户登录</h1>
  <h1 class='c1'>用户登录</h1>       # 便于多次使用
    
<form method="post" action="/login">
  用户名： <input type="text" name="username">
  密码：<input type="password" name="password">
  <input type="submit" value="提交">
</form>
</body>
</html>

3.写到文件中（*）

.c1{
    height:100px;
}
.c2{
    color:red;
}                     #适合写很多的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel='stylesheet' href="common.css" />
</head>
<body>
  <h1 class='c1'>用户登录</h1>
  <h1 class='c2'>用户登录</h1>
  <h1 class='c2'>用户登录</h1>
  <h1 class='c1'>用户登录</h1>
  <h1 class='c2'>用户登录</h1>       # 便于多次使用
    
<form method="post" action="/login">
  用户名： <input type="text" name="username">
  密码：<input type="password" name="password">
  <input type="submit" value="提交">
</form>
</body>
</html>

案例：flask内的应用

1.用在标签上和在head标签中实现

在这里插入图片描述

login.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        .c1{
            color: red;
        }
    </style>
</head>
<body>
  <h1 class="c1">用户登录</h1>
<form method="post" action="/login">
    <div style="height: 50px;">
        用户名： <input type="text" name="username">
    </div>
      <div style="height: 50px;">
          密码：<input type="password" name="password">
      </div>

  <input type="submit" value="提交">
</form>
</body>
</html>

2.在文件中实现

在这里插入图片描述

.xx{
    color: green;
}

register.html:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/static/commons.css">
</head>
<body>
    <h1 class="xx">用户注册</h1>
<form method="post" action="/register">
      <div>
    用户名：
    <input type="text" name="user">
  </div>

  <div>
    密码：
    <input type="password" name="pwd">
  </div>

   <div>
    性别：
    <input type="radio" name="n1" value="0">男
    <input type="radio" name="n1" value="1">女
  </div>

    <div>
    爱好：
    <input type="checkbox" name="hobby" value="10">羽毛球
    <input type="checkbox" name="hobby" value="11">听别人唱歌
    <input type="checkbox" name="hobby" value="12">沉浸式学习
    <input type="checkbox" name="hobby" value="13">发呆
    <input type="checkbox" name="hobby" value="14">散步
  </div>

   <div>
    城市：
    <select name="city">
      <option value="bj">北京</option>
      <option value="sh">上海</option>
      <option value="zh">珠海</option>
      <option value="hf">合肥</option>
      <option value="sjz">石家庄</option>
      <option value="sy">沈阳</option>
    </select>
  </div>

   <div>
    擅长领域：
    <select name="skill" multiple>
      <option value="100">笑(*^_^*)</option>
      <option value="101">吃好吃的</option>
      <option value="102">睡觉</option>
      <option value="103">等时间走掉</option>
    </select>
  </div>

  <div>
    备注：
    <textarea name="more" rows="3"></textarea>
  </div>







    <input type="submit" value="submit按钮">
</form>
</body>
</html>