HTML_css效果个人记录

最新推荐文章于 2024-11-01 12:26:05 发布

星辰北天

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量105

点赞数

分类专栏： CSS 文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_37567841/article/details/125507643

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用CSS进行卡片布局和字体样式的个性化设置，包括背景色、边框、阴影、字体家族、字体大小、颜色和文本阴影等。作者分享了用于网页标题和段落的美化技巧，并演示了链接在不同状态下的样式变化。此外，还包含了一个简单的HTML结构，展示如何将这些样式应用到实际页面中。

摘要由CSDN通过智能技术生成

CSS效果

暂时就先写着一个,以后有好玩的再写

卡片布局样式(css)

#id{
            background: #fff;
            padding: 1rem;
            border-radius: 7px;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.13);
}

效果如下
body的背景css为 background: aliceblue;

在这里插入图片描述

自己感觉好看的字体(自己写的)

css

/*
font-family: 字体选择;
 font-size: 字体大小;
font-weight: 字体粗细;
text-decoration: none;---下划线
font: bold 20px/50px "楷体";  --粗体 大小/行高 字体
p标签----color: 字体颜色;
  font:oblique bolder 20px "楷体";--斜体 粗体 大小 字体
   text-shadow: 颜色 偏移位置x y 模糊圆角;阴影
 


*/

body {
font-family: "Arial Black", 楷体;
}


h1 {
font-size: 50px;
text-shadow: #720ff3 5px 5px 20px;

}

p {
font-weight: bold;
color: rgb(0, 98, 255);
text-shadow: #f30f0f 5px 5px 20px;
}


/*默认调整*/
a {
color: black;
text-decoration: none;
font: oblique bolder 20px "楷体";
}
/*鼠标悬浮(只记住hover就行)*/
a:hover{
color: rgb(231, 46, 222);
font-size: 50px;

}
/*鼠标按下未释放
https://blog.csdn.net/qq_37567841?type=blog*/
a:active{
color: aquamarine;
}

html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>介绍页</title>
    <link rel="stylesheet" href="你的CSS路径">
<style>
    /*或者你把上面的css粘贴到这里玩*/
    
    </style>
</head>

<body>
    <h1>关于Me</h1>
    <p class="p1"> 在校大学生的Html自学之路</p>
    <p>安卓学习，java，js，css</p>
    <p><a href="">我的博客</a></p>
    <h3>当前目标</h3>
    <li>
        <p>完整的美化html</p>
        <p>做一个浏览器主页</p>
        <p>写个关于界面</p>
        <p>完成我的CSDN博客</p>


    </li>

    <li>
        <h>学会html网格布局</h>
    </li>

    <p>I have searched a thousand years,And I have cried a thousand tears. I found everything I need, You are everything to me.</p>


    <h1>列表美化</h1>
    <ul>
        <li>小标签1&nbsp;小标签2&nbsp;小标签3&nbsp;小标签4</li>
        <li>小标签1&nbsp;小标签2&nbsp;小标签3&nbsp;小标签4</li>
        <li>小标签1&nbsp;小标签2&nbsp;小标签3&nbsp;小标签4</li>
        <li>小标签1&nbsp;小标签2&nbsp;小标签3&nbsp;小标签4</li>
    </ul>


</body>


</html>