JavaWeb之css

最新推荐文章于 2022-07-18 12:48:03 发布
最新推荐文章于 2022-07-18 12:48:03 发布
阅读量155 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35654080/article/details/102880675
版权

css与html的3种结合方式

内联样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--

内联样式
    * 在标签内使用style属性指定css代码
-->
<div style="color:red;">hello css</div>


</body>
</html>

内部样式 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:blue;
        }

    </style>
</head>
<body>

<!--

内部样式
    * 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
<div>hello css</div>
<div>hello css</div>

</body>
</html>

外部样式 


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link rel="stylesheet" href="css/a.css">

<!--    <style>-->
<!--        @import "css/a.css";-->
<!--    </style>-->
</head>
<body>

<!--

外部样式
    1. 定义css资源文件。
    2. 在head标签内，定义link标签，引入外部的资源文件
-->
<div>hello css</div>
<div>hello css</div>

<p>呵呵</p>

</body>
</html>

基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: burlywood;
        }
        div{
            color:green;
        }

        .clsl{
            color: red;
        }
    </style>
</head>
<body>
<!--
1. 基础选择器
    1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
        * 语法：#id属性值{}
    2. 元素选择器：选择具有相同标签名称的元素
        * 语法： 标签名称{}
        * 注意：id选择器优先级高于元素选择器
    3. 类选择器：选择具有相同的class属性值的元素。
        * 语法：.class属性值{}
        * 注意：类选择器选择器优先级高于元素选择器
-->
<div id="div1">传播博客</div>
<div class="clsl">黑马程序员</div>
<p class="clsl">空间的思考</p>
</body>
</html>

扩展选择器


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>

    <style>

        div p{
            color:red;
        }

        div > p {
            border: 1px solid;
        }

        input[type='text']{
            border: 5px solid;
        }

        a:link{
            color: pink;
        }

        a:hover{
            color: green;
        }

        a:active{
            color: yellow;
        }

        a:visited{
            color: red;
        }

    </style>
</head>
<body>
<!--
1.并集选择器:
    选择器1,选择器2{}
2.子选择器：
    选择器1 选择器2{}
3.父选择器：
    选择器1>选择器2{}
4.属性选择器：
    元素名称[属性名="属性值"]{}
5.伪选择器：
    元素：状态{}
    <a>  状态：
        link visited active hover
-->
<div>
    <p>传智播客</p>
</div>
<p>黑马程序员</p>

<div>aaa</div>

<input type="text" >
<input type="password" >


<br>    <br>    <br>

<a href="#">黑马程序员</a>




</body>
</html>

css属性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性</title>
    <style>
        p{
            color: red;
            font-size: 30px;
            text-align: center;
            line-height: 100px;
            border: 1px solid red;
        }

        div{
            border: 1px solid red;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
    <p>传智播客</p>
    <div>
        黑马程序员
    </div>
</body>
</html>

css属性_盒子模型


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css属性</title>


    <style>
        div{
            border: 1px solid red;
            width: 100px;
        }
        .div1{
            width: 100px;
            height: 100px;
            /*外边距*/
            /* margin: 50px; */
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            /*
                设置盒子的属性，让width和height就是最终盒子的大小
             */
            box-sizing: border-box;
        }

        .div3{
            float: left;
        }

        .div4{
            float: left;
        }

        .div5{
            float: right;
        }

    </style>
</head>
<body>


<div  class="div2">
    <div class="div1"></div>

</div>

<div class="div3">aaaa</div>
<div class="div4">bbbbb</div>
<div class="div5">cccc</div>
</body>
</html>

注册案例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
<style>
    *{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    body{
        background: url("img/register_bg.png") no-repeat center;
        padding-top: 25px;
    }

    .rg_layout{
        width: 900px;
        height: 500px;
        border: 8px solid #EEEEEE;
        background-color: white;
        /*让div水平居中*/
        margin: auto;
    }

    .rg_left{
        /*border: 1px solid red;*/
        float: left;
        margin: 15px;
    }
    .rg_left > p:first-child{
        color:#FFD026;
        font-size: 20px;
    }

    .rg_left > p:last-child{
        color:#A6A6A6;
        font-size: 20px;

    }


    .rg_center{
        float: left;
       /* border: 1px solid red;*/

    }

    .rg_right{
        /*border: 1px solid red;*/
        float: right;
        margin: 15px;
    }

    .rg_right > p:first-child{
        font-size: 15px;

    }
    .rg_right p a {
        color:pink;
    }

    .td_left{
        width: 100px;
        text-align: right;
        height: 45px;
    }
    .td_right{
        padding-left: 50px ;
    }

    #username,#password,#email,#name,#tel,#birthday,#checkcode{
        width: 251px;
        height: 32px;
        border: 1px solid #A6A6A6 ;
        /*设置边框圆角*/
        border-radius: 5px;
        padding-left: 10px;
    }
    #checkcode{
        width: 110px;
    }

    #img_check{
        height: 32px;
        vertical-align: middle;
    }

    #btn_sub{
        width: 150px;
        height: 40px;
        background-color: #FFD026;
        border: 1px solid #FFD026 ;
    }

</style>

</head>
<body>

<div class="rg_layout">
    <div class="rg_left">
        <p>新用户注册</p>
        <p>USER REGISTER</p>

    </div>

    <div class="rg_center">
        <div class="rg_form">
            <!--定义表单 form-->
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="email">Email</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="tel">手机号</label></td>
                        <td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label>性别</label></td>
                        <td class="td_right">
                            <input type="radio" name="gender" value="male"> 男
                            <input type="radio" name="gender" value="female"> 女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="checkcode" >验证码</label></td>
                        <td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
                            <img id="img_check" src="img/verify_code.jpg">
                        </td>
                    </tr>


                    <tr>
                        <td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
                    </tr>
                </table>

            </form>


        </div>

    </div>

    <div class="rg_right">
        <p>已有账号?<a href="#">立即登录</a></p>
    </div>


</div>


</body>
</html>

 

凌晨两点半还不回家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS
Django
11-08 156
HTML 表单标签： 1. 用于采集用户输入的数据 2. 使用标签：form 1. 可以定义一个范围，这个范围代表采集用户数据的范围 2. 属性： 1. action：指定提交数据的URL 2. method：指定提交方式 1. 一共其中，2两种常用 1. get: 1. 请求参数会在地址栏中显示。封装到请求行中。 2. 请求参数的长度是有限制的 3. 不太安全 2. post: 1. 请求参数不会在地址栏中显示。会封装在请求体中
炫酷的 java 登录注册界面 css 样式
04-28
比较炫酷实用的java登录界面，可以用来学习 或者直接使用，使用简单快捷
JavaWeb快速入门（二）——实现登录页面
热门推荐
IT女孩儿的日常的博客
07-04 4万+
（一）静态登录页面我们在https://blog.csdn.net/qq_35616167/article/details/80917262的基础上，继续对javaweb项目进行操作，以熟悉javaweb。在项目工程下的WebRoot文件夹下，为使得项目清晰，我们可以分别新建文件夹css、js、img以存放html所需的css等。我们把https://blog.csdn.net/qq_3...
JavaWeb——CSS应用实例详解（概述、语法、选择器、属性、用户登录界面实例）
数字世界 万物互联
05-18 680
目录 1、CSS概述 2、CSS的使用 3、CSS的基本语法与选择器 4、CSS属性 5、CSS使用案例实战 1、CSS概述 CSS是用来页面美化与布局控制的，英文全称为Cascading Style Sheets 层叠样式表，层叠：多个样式可以同时作用在同一个html的元素上，同时生效。 使用CSS的好处有哪些？ 功能强大 将内容展示和样式控制分离，降低耦合度，让分工更容易，提高开发效率。 2、CSS的使用 CSS与html的结合方式有三种：内联样式、内部样式、外部样式： 内联样式
javaweb留言板css
10-10
javaweb 留言板css代码，学习时候上课时候，是需要用到的必要代码
javaweb html css3 jquery javascript oracle
05-20
javaweb html css3 jquery javascript oracle
JavaWeb——css基础知识与它的三种使用方法和三种选择器
01-08
什么是css css，全称Cascading Style Sheets，中文名：层叠样式表。它是一种用来表现（表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等）HTML或XML等文件样式的计算机语言，是用于增强控制网...
javaweb css样式表
12-14
css样式表
Javaweb-飞机机票预订系统
11-07
用了一点Mybatis,但不多. 有相当多部分的代码并没有很完善. 这只是一个期末作业,也算一个学习的过程吧
JavaWeb开发——使用DIV+CSS设计简单页面
炸鸡和薯条的博客
10-17 1646
使用frameset标签，以及搭配使用DIV+CSS，设计并布局一个简单的页面。 ① 定义body属性 body{ font-size:12px; margin:0px auto; height:auto; width:100%; background-image:url(star.jpg);/*插入背景图片*/ color:#FFFFFF; background-size:cover; text-align:c
Java web实现简登录页面（MyBatis+jsp+servlet+html+css+javascript）附源码
poetteaes的博客
07-01 3万+
本文利用MyBatis+jsp+servlet+html+css+javascript实现了一个简单的登录页面。对用户输入的用户名和密码就行校验，校验通过则登录成功，密码和用户信息保存在mysql表中，通过MyBatis访问（MyBatis相关知识可参考先前的文章MyBatis测试）。先给出最终的效果图： 登录成功则进入如下页面： 登录失败，则进入如下页面： 如果输入的密码或者用...
JavaWeb用户信息管理系统-创建登录页面
赵广陆
07-06 1万+
1 页面登录模板 2 导入模板所需的css和js还有图片 3 将静态的html转换为jsp文件 一般从head开始替换，因为头不用变。 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
JavaWeb CSS专题简单案例 注册页面
DAurora的博客
10-27 650
简单注册页面及CSS简单应用 注册页面： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户注册页面</title> </head> <body> <!--定义表单--> <form action="#" method="post">
JavaWeb01_HTML+CSS实现注册页面
SeafyLiang的博客
02-24 1585
Web概念概述 JavaWeb 使用Java语言开发基于互联网的项目 软件架构： 1. C/S: Client/Server 客户端/服务器端 * 在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... * 优点： 1. 用户体验好 * 缺点： 1. 开发、安装，部署，维护 麻烦 2. B/S: Browser/Server 浏览器/服务器端 * 只需要一个浏览...
javaWeb CSS
weixin_65637841的博客
07-18 903
CSS 是「层叠样式表单」。是用于 (增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS 语法 CSS 语法由三部分构成：选择器、属性和值： selector {property: value} 选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）： body {color: blue} ...
JavaWeb - CSS
qq_46120393的博客
05-25 462
1. 什么是CSS 2. CSS的基本语法规范 3. CSS的引入方式 4. 常用选择器     标签选择器     类选择器     id选择器     通配符选择器     后代选择器     子选择器     并集选择器     伪类选择器 5. 字体属性     字体样式     字体大小     字体粗细     字体倾斜 6. 文本属性     文本颜色     文本对齐     文本装饰     文本缩进     行高 7. 背景属性     背景颜色     背景图片     背景平铺   
Javaweb中css的编写格式
小明的博客
11-24 3660
html 在一个网页中负责的事情是一个页面的结构             css(层叠样式表) 在一个网页中主要负责了页面的数据样式。      编写css代码的方式：     第一种： 在style标签中编写css代码。   只能用于本页面中，复用性不强。         格式 ：                             编写css的代码。          
JavaWeb之Html
ysl的博客
11-03 119
文本标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本标签</title> </head> <body> <!-- 注释--> 黑马旅游网 <h1>黑马旅游网...
javaweb项目css样式失效
最新发布
05-30
可能是由于以下几个原因导致CSS样式失效： 1. CSS文件路径错误：请确保你的CSS文件路径正确，否则浏览器无法加载CSS文件。 2. CSS文件命名错误：请确保你的CSS文件名正确，如果文件名不正确，浏览器将无法加载CSS...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值