java day23 CSS

最新推荐文章于 2024-10-13 16:42:31 发布
最新推荐文章于 2024-10-13 16:42:31 发布
阅读量158 收藏
点赞数
分类专栏： java学习日记 文章标签： html css css3 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43642864/article/details/111597018
版权

1、CSS简介

1.1 什么是CSS

  • CSS :全称：Cascading Style Sheets 层叠样式表,定义如何显示HTML元素
  • 多个样式可以层层覆盖叠加，如果不同的css样式对同一html标签进行修饰，样式有冲突的
    应用优先级高的，不冲突的共同作用

1.2 CSS能干什么

  • 修饰美化html网页。
  • 外部样式表可以提高代码复用性从而提高工作效率。
  • html内容与样式表现分离，便于后期维护。

1.3 CSS书写规范

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明

  • 选择器通常是您需要改变样式的 HTML 元素。
  • 每条声明由一个属性和一个值组成。

1.4 基础语法

选择器｛属性：值;属性:值…… ｝

  • id选择器：
    • #news{
      margin-left: 24px;
      }
  • 类选择器：
    • .menu{
      float: left;
      margin-right: 31px;
      text-decoration: none;
      font:13px/23px Arial,sans-serif;
      }
  • 通配符选择器：
    • * {
      color: #00f;
      }
  • 标签选择器：
    • h1{
      color: red;
      }
      p{
      font-size: 50px;
      color: aquamarine;
      }
  • 属性选择器
    • p[name=“p1”][a=“p1”]{
      color: red;
      font-size: 22px;
      }
  • 派生选择器
    • ul li{
      color: red;
      }
  • 相邻选择器
    • li+li{
      color: red;
      }
  • 锚伪类选择器：
    • boby{
      background-color: red;
      }
      a:link{
      color: black;
      font-size: 15px;
      }
      a:hover{
      color: red;
      font-size: 20px;
      }
      a:active{
      color: greenyellow;
      }
      a:visited{
      color: darkorange;
      }

2、CSS导入方式

2.1 内嵌式（内联式）

把css样式嵌入html标签中

<p style="color: red">Mybatis是如何进行分页的?分页插件的原理是什么?</p>

2.2 内部式

在head标签中使用style标签引入css

<style type="text/css">
        span{
            color: blue;
        }
    </style>

2.3 外部式

将css样式抽成一个单独文件，使用者直接引用

<link href="../css/mycss.css" rel="stylesheet">

3、div盒子模型

在这里插入图片描述

3.1 边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        页面布局:
            table+css
            div+css
    -->
    <style type="text/css">
        #one{
            border:solid red 1px;
            /*内边距 内容与所有边框的距离*/
            /*padding: 10px;*/
            /*内容与左边框的距离*/
            padding-left: 10px;
        }
        #two{
            border: solid blue 1px;
            /*外边距 当前div与其他div边框的距离*/
            margin: 10px;
        }
        #three{
            border: solid green 1px;
        }
    </style>
</head>
<body>
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</div>
</body>
</html>

3.2 相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_相对定位</title>
    <style type="text/css">
        /*相对定位：相对于原有的位置进行改变，保留原来的位置，不影响其他div*/
        #one{
            border:solid red 1px;
        }
        #two{
            border: solid blue 1px;
            position: relative;
            left: 10px;
            top: 10px;
        }
        #three{
            border: solid green 1px;
        }
    </style>
</head>
<body>
    <div id="one">第一个盒子</div>
    <div id="two">第二个盒子</div>
    <div id="three">第三个盒子</div>
</body>
</html>

3.3 绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_绝对定位</title>
    <style type="text/css">
        /*绝对定位:相对于拥有position属性的父标签进行定位，如果父标签没有position属性
                    继续往上寻找，如果一直没有，则相对于body定位*/
        #one{
            border:solid red 1px;
        }
        #two{
            border: solid blue 1px;
            /*绝对定位*/
            position: absolute;
            left: 0px;
        }
        #three{
            border: solid green 1px;
        }
    </style>
</head>
<body>
    <div id="one">1</div>
    <div id="two">2</div>
    <div id="three">3</div>
</body>
</html>

3.4 浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04_浮动</title>
    <style>
        #one{
            width: 100px;
            height: 100px;
            border: solid red 1px;
            float:left;
        }
        #two{
            width: 100px;
            height: 100px;
            border: solid blue 1px;
            float: right;
        }
        #three{
            width: 100px;
            height: 100px;
            border: solid green 1px;
        }
        /*清除浮动状态*/
        #clear{
            clear: both;
        }
    </style>
</head>
<body>
    <div id="one" >1</div>
    <div id="two">2</div>
    <div id="clear"></div>
    <div id="three">3</div>
</body>
</html>

案例展示

模仿百度首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <link rel="icon" href="icon/baidu_logo.png" type="image/x-icon">
    <style type="text/css">
        .top_bar_left{
            float: left;
        }
        #news{
            margin-left: 24px;
        }
            .menu{
                 float: left;
                 margin-right: 31px;
                 text-decoration: none;
                 font:13px/23px Arial,sans-serif;
             }
        .menu1{
            float: left;
            margin-right: 25px;
            text-decoration: none;
            font:13px/23px Arial,sans-serif;
        }
        .menu2{
            position: absolute;
            right: 150px;
            float: left;
            margin-left: 2px;
        }
        .menu:hover{
            float: left;
            margin-right: 31px;
        }
        a{
            text-decoration: none;
            color: black;
        }
        a:hover{
            color: dodgerblue;
        }
        .top_bar_right{
            float: right;
        }
        #weather_pictures img{
            height: 23px;
            margin-right: 31px;
        }
        #temperature{
            margin-right: 45px;
        }
        #head_logo{
            border-radius: 50%;
            height: 23px;
        }

        .menu_name{
            position: relative;
            float: right;
            font:13px/23px Arial,sans-serif;
            margin-right: 10px;
        }
        .menu_name #username{
            padding-left: 10px;
        }

        #baidu_logo{
            position: relative;
            align-self: center;
            margin-left: 640px;
        }
        #baidu_logo img{
            height: 130px;
        }
        #middle{
            padding-top: 40px;
        }
        #serach_input{
            height: 16px;
            width: 520px;
            padding: 12px 16px;
            font-size: 16px;
            vertical-align: top;
            outline: 0;
            box-shadow: none;
            border-radius: 10px 0 0 10px;
            border: 2px solid #c4c7ce;
            background: #fff;
            color: #222;
            overflow: hidden;
            box-sizing: content-box;
            margin-left: 440px;
        }
        #baidu_search{
            cursor: pointer;
            width: 108px;
            height: 44px;
            line-height: 45px;
            line-height: 44px\9;
            padding: 0;
            background-color: #4e6ef2;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            color: #fff;
            box-shadow: none;
            font-weight: 400;
            border: none;
            outline: 0;
            text-align: center;
        }
        .search{
            margin-top: 10px;
        }
        .bar{
            margin-top: 100px;
            margin-left: 250px;
            padding-bottom: 10px;
        }
        .bar a{
            margin-right: 15px;
        }
        .title{
            margin-left: 250px;
            font: 20px/30px Arial,sans-serif;
            padding-bottom: 10px;
        }
        .new_img{
            margin-left: 250px;

        }
        #new_img img{
            border-radius: 10px;
        }
        .news_left{
            float: left;
            width: 800px;

        }
        .news_right{
            float: right;
        }

        .bar_right{
            margin-top: 100px;
        }
        .bar_right a{
            position: relative;
            margin-right: 270px;
        }
        .counts{
            float: right;
            margin-right: 275px;
        }
        .number{
            padding-right: 20px;
        }
        p{
            font: 15px Arial,sans-serif;
        }
    </style>
</head>
<body>
<div id="top">
    <div class="top_bar_left">
        <a href="#" class="menu" id="news">新闻</a>
        <a href="#" class="menu" id="hao123">hao123</a>
        <a href="#" class="menu" id="maps">地图</a>
        <a href="#" class="menu" id="video">视频</a>
        <a href="#" class="menu" id="postbar">贴吧</a>
        <a href="#" class="menu" id="study">学术</a>
        <a href="#" class="menu" id="more">更多</a>
    </div>

    <div class="top_bar_right">
        <div class="menu1"><a href="#" id="guangzhou">广州</a></div>
        <a href="#">
            <div class="menu1" id="weather_pictures"><img src="icon/a1.png"></div>
            <div class="menu2" id="temperature"><a href="#" >19°C</a></div>
        </a>
        <div class="menu1"><a href="#" >设置</a></div>
        <div class="menu1">
            <a href="#"><img id="head_logo" src="icon/touxiang.jpg"></a>
            <div class="menu_name">
                <a href="#" id="username">岁月如歌</a>
            </div>
        </div>
    </div>
</div>
<div id="middle">
    <div id="baidu_logo" ><img src="icon/baidu.png"></div>
    <div class="search"><input id="serach_input" ><input type="button" id="baidu_search" value="百度一下"></div>
</div>


<div id="bottom_news">
        <div class="news_left">
            <div class="bar">
                <a href="#">我的关注</a>
                <a href="#">推荐</a>
                <a href="#">导航</a>
            </div>
            <div class="title">荣耀V40再曝支持45W无线充；小米11发布时间确定没有Pro？</div>
            <div class="new_img"> <img src="icon/newphoto.png"> </div>
        </div>


        <div class="news_right">
            <div class="bar_right">
                <a href="#">百度热榜</a>
                <a href="#">换一换</a>
            </div>
            <div class="specific_news">
                <p>
                    <span class="number">1</span>
                    <span class="new_title"><a href="#">美舰擅闯南沙海域 中方警告驱离</a></span>
                    <span class="counts"><a href="#">483万</a></span>
                </p>

                <p>
                    <span class="number">2</span>
                    <span class="new_title"><a href="#">检方认为劳荣枝主观恶性极深</a></span>
                    <span class="counts"><a href="#">466万</a></span>
                </p>
</a>
                <p>
                    <span class="number">3</span>
                    <span class="new_title"><a href="#">大连:开展全员核酸检测</a></span>
                    <span class="counts"><a href="#">450万</a></span>
                </p>

                <p>
                    <span class="number">4</span>
                    <span class="new_title"><a href="#">18岁大学生立遗嘱财产留给朋友</a></span>
                    <span class="counts"><a href="#">411万</a></span>
                </p>

                <p>
                    <span class="number">5</span>
                    <span class="new_title"><a href="#">大连海洋大学出现疫情?校方回应</a></span>
                    <span class="counts"><a href="#">383万</a></span>
                </p>

                <p>
                    <span class="number">6</span>
                    <span class="new_title"><a href="#">杜海涛删除二手平台已售宝贝</a></span>
                    <span class="counts"><a href="#">369万</a></span>
                </p>

            </div>
        </div>
</div>
</body>
</html>

效果：
在这里插入图片描述

wzyyj
关注
专栏目录
day02_CSS预习笔记1
08-03
【CSS预习笔记1】- CSS基础与应用 在网页设计中，CSS（Cascading Style Sheets）扮演着至关重要的角色，它负责控制网页的样式和布局，使内容与表现分离，让页面更加美观和易读。这篇笔记将详细介绍CSS的基础知识，...
基于Java的Enjoy every day日常主题网站设计源码
09-29
该项目是一款以Java为核心，融合HTML、CSS等多语言开发的Enjoy every day日常主题网站源码。包含117个文件，其中HTML和Java文件各占19和8个，图片文件51个，文档和配置文件共31个。整个项目结构清晰，适合日常主题...
【JavaWeb习笔记】DAY03——CSS
m0_62106729的博客
07-01 836
本文总结了CSS语言相关知识点。包括创建CSS文档、使用CSS语言、介绍了id选择器和class选择器、总结了常用的CSS样式。仅供学习，侵权必删！
【Java项目学习 Day10】CSS
weixin_51617671的博客
07-24 73
CSS
JAVA学习数据库阶段day08
weixin_62527159的博客
01-17 94
JAVA学习数据库阶段day08
java学习day11
zebdhr的博客
07-26 1019
Java反射是指在程序运行期间，可以动态地获取和操作类中定义的属性和方法以及构造方法的机制(思想)的实现，而不需要在编译期间知道类名或者其成员变量和方法具体等的信息。有对象之前必须先有类，static来修饰类的属性和方法在java中存储了类的内容，这个内容也应该是一个对象java中每一个类都有一个内存，这每一块内存都是一个对象这些对象记录了这些类中声明了哪些属性和方法以及构造方法java将这些类抽象为一个Class类。
Java基础入门day35
zpz2001的专栏
04-18 1270
Java基础入门
java全栈day02-HTML&CSS常见标签2
xlsw_的博客
10-13 325
java全栈day02-前端Web-HTML&CSS完结！！！
Java基础入门day36
zpz2001的专栏
04-19 879
Java基础入门
java全栈day01-前端Web-HTML&CSS
xlsw_的博客
10-11 883
java全栈初学之初识Web-day01
Java学习笔记-Day44 CSS 层叠样式表（一）
qq_42141141的博客
12-08 1072
Java学习笔记-Day44 CSS 层叠样式表一、CSS的基本概念1、CSS的主要作用2、CSS的版本介绍三、CSS的引入方式1、内联样式表2、嵌入样式表3、外联样式表3.1、引入css文件声明3.2、代码示例4、导入样式表4.1、导入css文件4.2、代码示例5、外联样式表与导入样式表的区别四、CSS的注释五、选择器1、标签选择器2、类选择器3、ID选择器4、选择器分组5、派生选择器6、后代选择器7、属性选择器8、伪类选择符     一、CSS的基本概念   CSS （Cascading Style S
JavaEE day4 初识CSS
a931394057的博客
01-25 904
初识CSS基本规则与选择器规则
java教程超全面javaweb教程28天day2- 02 css的简介
08-31
java教程超全面javaweb教程28天day2-_02_css的简介
java教程超全面javaweb教程28天day2- 04 css的优先级
08-31
java教程超全面javaweb教程28天day2-_04_css的优先级
java教程超全面javaweb教程28天day2- 08 css的盒子模型
08-31
java教程超全面javaweb教程28天day2-_08_css的盒子模型
java day04 循环结构(for、while、do/while)与流程控制关键字(break、continue、return)
qq_43642864的博客
11-19 515
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvREOzBU-1605779963868)(Pictures\标题.PNG)] Author：Cindy Version：9.0.2 文章目录一、引言1.1 生活中的循环二、循环的概念2.1 程序中的循环三、while循环3.1 while循环3.2 循环的组成3.3 初始与迭代3.4 while的特点3.5 课堂案例四、do while循环4.1 do while循环4.2 do while的应用场景五、for循环5.1
java day02 变量、数据类型、类型转换、运算符
qq_43642864的博客
11-17 446
1、变量 1.1 什么是变量 变量：计算机内存中的存储空间，是存储数据的基本单位 1.2 如何定义变量 声明变量的3种方式： 声明，再赋值 数据类型 变量名; 变量名 = 值; 声明,并赋值 数据类型 变量名 = 值; 多个同类型变量的声明与赋值 数据类型 变量1 , 变量2 , 变量3 = 值3 , 变量4 , 变量5 = 值5; 示例： public class Demo01{ public static void main(String[] args)
java day36 mysql（3）
qq_43642864的博客
01-07 435
1、msyql练习 1.1 数据库文件下载： 链接：https://pan.baidu.com/s/1bqfkFf0TDSacFRD4SVPjFw 提取码：2ys0 1.2 题目及答案 一、单表查询 1、选择部门30中的雇员 SELECT *from emp where Deptno=30; 2、列出所有办事员的姓名、编号和部门 SELECT e.Ename,e.Empno,d.Dname from emp as e inner join dept as d on e.Deptno=d.Deptno;
Windows下 maven环境变量配置、maven在eclipse的配置
qq_43642864的博客
12-16 388
第一步 要配置maven环境变量，需要先配置好java环境变量 java环境变量配置网址：https://blog.csdn.net/qq_43642864/article/details/103340857 1.1 鼠标右键单机”此电脑“； 1.2 选择”属性“； 1.3 此时进入”属性“界面，找到左侧”高级系统设置“并点击进入； 1.4 此时会直接看到”系统属性“界面的”高级“选项卡； 1.5...
java制作一个课表，使用css美化
最新发布
10-24
在Java中创建一个课表，并使用CSS美化可以分为两个部分：数据结构和UI设计。首先，我们创建一个简单的Java类来表示课程，然后使用HTML和CSS来展示这个课表。 1. 数据模型：定义一个`Course`类，包含属性如课程名、教师、时间和地点等。示例代码如下： ```java public class Course { private String courseName; private String teacher; private LocalTime time; private String location; // getters and setters } ``` 2. 创建课表列表：使用Java集合（例如ArrayList或LinkedList）存储课程实例，然后遍历它们生成HTML字符串。 ```java List<Course> courses = ...; // 初始化课程列表 StringBuilder htmlBuilder = new StringBuilder(); htmlBuilder.append("<table class='schedule'>"); for (Course course : courses) { htmlBuilder.append("<tr>"); htmlBuilder.append("<td>" + course.getCourseName() + "</td>"); htmlBuilder.append("<td>" + course.getTeacher() + "</td>"); htmlBuilder.append("<td>" + course.getTime().toString() + "</td>"); htmlBuilder.append("<td>" + course.getLocation() + "</td>"); htmlBuilder.append("</tr>"); } htmlBuilder.append("</table>"); String scheduleTable = htmlBuilder.toString(); ``` 3. 使用CSS美化：创建一个`.schedule`的CSS样式，包括颜色、字体、边距等，为课表添加美观的外观。例如： ```css .schedule { border-collapse: collapse; width: 80%; margin: auto; } .schedule th, .schedule td { padding: 10px; text-align: left; border-bottom: 1px solid #ddd; } .schedule th { background-color: #f2f2f2; font-weight: bold; } .day { color: #666; } .location { color: #999; } ``` 将HTML和CSS合并到一起，你就得到一个简单的Java课表了。记得将实际的课程数据填充到`courses`列表中。如果你需要更复杂的功能，比如搜索、排序等，也可以根据需求进行扩展。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值