0 0 0 8 - CSS样式文件

谦虚求学 · 发表于 2017-4-18 09:51:22

不二如是发表于 2017-1-9 12:24
文字，做得好看，一样滴～

不二版主开个视频教程吧看文字眼睛花啊，出来也给大家露下脸，你展你的才华

谦虚求学 · 发表于 2017-4-18 09:54:52

哎呀文盲真可怕字都打错了应该是 ‘一展才华’

wangguohui · 发表于 2017-6-22 17:17:28

/*传说中的超级CSS*/
@charset "UTF-8";
                html{
                        height: 100%;
                        color: #FF0088;
                        font-family: sans-serif; 
                }
                body{
                        background: url(314e251f95cad1c862803b2e7d3e6709c93d5184.jpg) center center;
                        background-size: cover;
                        font-size: 33px;
                        position: relative;
                        margin: 0;
                        padding: 0;

                }
                #container{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 50%;
                        text-transform: translateY(-50%);

                }
                a{
                        color: #FFFFFF;
                        border: 1px solid #33FFFF;
                        border-radius: 10px;
                        font-size: 55px;
                        background: #33FFFF;
                        text-transform: none;
                        padding: 10px 66px;

                }

页面文字没有上下居中，什么情况啊

MSK · 发表于 2017-7-5 17:01:48

交！作！业！

css：

@charset 'utf-8';
html{
                height:100%;
            }
            body{
                background: url(http://img2.imgtn.bdimg.com/it/u=330117910,1717224124&fm=26&gp=0.jpg) center center;
                background-size:cover;
                text-align: center;
                margin:0;
                padding:0;
                color:red;
                position:relative;
                top:50%;
            }
            #link{
                width:100%;
                position:absolute;
                transform: translateY(-50%)
            }
            h1{
                font-family: 宋体;
                font-size:80px;
                margin-bottom:5px;
            }
            p{
                margin-bottom:60px;
                color:orange;
                font-size:20px;
            }
            a{
                color:#FFF;
                border:5px solid aqua;/*边框高度与颜色*/
                border-radius:15px;/*圆角弯曲度*/
                padding:15px 99px;/*边框大小*/
                text-decoration: none;
                font-size:16px;
                background:cyan;/*填充色*/
            }

html：

<!doctype html>
<html>
    <head>
        <title>可爱的超链接</title>
        <meta charset='utf-8'>
        <link href='008.css' rel='stylesheet'>
        </style>
    </head>
    <body>
        <div id='link'>
            <h1>我爱鱼C</h1>
            <p>让编程改变世界</p>
            <a href='http://www.fishc.com'>传送门</a>
        </div>
    </body>
</html>

aswyamato1989 · 发表于 2017-7-5 22:26:57

交作业：

xl7613 · 发表于 2017-8-2 15:01:14

学习学习

易改乌江水 · 发表于 2018-1-21 23:29:58

本帖最后由易改乌江水于 2021-6-10 11:49 编辑

@charset "UTF-8"; 
html{
        height: 100%;
        color: #5599FF;
        font-family: sans-serif;
        }
body{
        background: url(background.jpg);
        background-size: cover;
        background: url(background.jpg) center center;
        }
#ha
        {
        width: 100%;
        text-align: center;
        }
h1
        {
        font-size: 66px;
        margin-bottom: 22px;
        }
a
        {
        font-size: 20px;
        background: #FFDD55;
        padding:9px 22px;
        text-decoration: none;
        color: #FFF;
        border:3px solid #FFDD55;
        border-radius: 3px;
        margin: 5px 33px 5px 33px;

这是CSS

<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>易改乌江水鱼C学习</title>
                <link href="yucxue.css" rel="stylesheet">
        </head>
        <body>
                <div id="ha">
                        <h1>易改乌江水爱鱼C</h1>
                        <p>WWW.FishC.com</p>
                        <a href="http://bbs.fishc.com/thread-81254-1-1.html">HTML5-庖丁解牛-0008</a>
                        <a href="http://bbs.fishc.com">
                                <img src="fishc.png" width="359" height="84" />
                        </a>
        </body>
</html>

这是HTML（专门为了学不二老师的课写的）
-----------------------------------------------------2021\6\10高考over-----------------------------------------
我当年写了个啥，我不认识当时的我，怎么可以这么拉跨啊（）

ttyhtg · 发表于 2018-2-3 21:57:34

就因为第一行一个星号不小心达成了中文符号，让我玩了半天的找不同游戏，这要是在学校估计得挨一巴掌
QQ截图20180203215347.png

helingyuan · 发表于 2018-2-9 03:56:41

强烈支持！

likesunshine · 发表于 2018-3-8 16:55:52

也要举一反三

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<style type="text/css">
html,body{
height: 100%;
color: #FF0088;
font-family: sans-serif;
}
body{
background: url(background.jpg);
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h1{
font-size: 66px;
margin-bottom: 22px;
}
p{
font-size: 33px;
margin-bottom: 55px;
}
a{
font-size: 55px;
color: #33FFFF;
border: 1px solid #33FFFF;
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 继续学习</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
<a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</div>
</body>
</html>

likesunshine · 发表于 2018-3-8 17:05:29

本帖最后由 likesunshine 于 2018-3-8 17:08 编辑

展示
html：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎来到HTML世界</title>
<link href="background.css" rel="stylesheet">
</head>
<body>
<div id="container">
<h1>我爱鱼C</h1>
<p>WWW.FishC.com - 继续学习</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
<a href="http://bbs.fishc.com/forum.php?mod=collection&action=view&ctid=539">HTML5-庖丁解牛</a>
</div>
</body>
</html>

CSS：
@charset "utf-8";
html,body{
height: 100%;
color: #FF0088;
font-family: sans-serif;
}
body{
background: url(background.jpg);
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
h1{
font-size: 66px;
margin-bottom: 22px;
}
p{
font-size: 33px;
margin-bottom: 55px;
}
a{
font-size: 55px;
color: #33FFFF;
border: 1px solid #33FFFF;
border-radius: 10px;
padding:10px 66px;
text-decoration: none;
}

rock5442107 · 发表于 2018-5-26 12:13:26

這是HTML的內容

<!DOCTYPE html>
<html>
<head>
        <meata charset="UTF-8">
        <title>歡迎來到HTML世界</title>
        <link href="Dabao.css" rel="stylesheet">
        </style>
</head>

<body>
        <div id="container">
                <h1>我愛魚C</h1>
                <p>WWW.FishC.com - 讓編程改變世界</p>
                <a >傳送門</a>
        </div>
</body>
</html>

這是CSS樣式表的內容

/*用来制定样式文件的编码格式*/
@charset "UTF-8"; 
                html,body{
                        height: 100%;
                        color: #00FF00;
                        font-family: sans-serif;
                }
                body{
                        background: url(KED08.jpg);
                        background-size: cover;
                        margin: 0;/*養成初始化好習慣*/
                        padding: 0;
                        position: relative;
                }
                #container{
                        width:100%;
                        text-align: center;
                        position: absolute;
                        top:50%;
                        transform: translateY(-50%);
                }
                h1{
                        font-size: 66px;
                        margin-bottom: 22px;
                }
                p{
                        font-size: 33px;
                        margin-bottom: 22px;
                }
                a{
                        font-size: 55px;
                        background: #000000;
                        color:#FFFFFF;
                        border:1px solid #0000FF;
                        border-radius: 10px;
                        padding:10px 66px;
                        text-decoration: none;
                }

土耳其东木白 · 发表于 2018-5-29 14:09:59

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8">
        <title>欢迎来到HTML世界</title>
        <link href="0008CSS.css" rel="stylesheet">
</head>
<body>
        <div id="container">
                <h1>我爱鱼C</h1>
                <p>WWW.FihsC.com - 让编程改变世界</p>
                <a >传送门</a>
        </div>
        <div id="Gucci">
                <h1>I love Gucci</h1>
                <p>Gucci Gucci Parada Parada</p>
                <a >传送门</a>
        </div>
        <div id="Prada">
                <h1>脚踩Prada的女魔头</h1>
                <p>WWW.FihsC.com - 让编程改变世界</p>
                <a >传送门</a>
        </div>
</body>
</html>


@charset "UTF-8";

                html,body{
                        height: 100%;
                        color: #FA3;
                        font-family: cursive;
                }
                h1{
                        font-size: 33px;
                        margin-bottom: -20px;
                }
                p{
                        font-size: 22px;
                        margin-bottom: 22px;
                }
                a{
                        font-size: 33px;
                        color: #fff;
                        background: #0F0;
                        border: 5px solid #0f0;
                        border-radius: 10px;
                        padding: 1px 11px;
                        text-decoration: none;
                }
                body{
                        background: url(pic_02.png)center center;
                        background-size: cover;
                        margin: 0;
                        padding:0;
                        position: relative;
                }
                #container{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 60%;
                        transform: translateY(-50%);
                }
                #Gucci{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 20%;
                        transform: translateY(-50%);
                }
                #Prada{
                        width: 100%;
                        text-align: center;
                        position: absolute;
                        top: 40%;
                        transform: translateY(-50%);                        
                }

我爱鱼C！ · 发表于 2018-7-15 07:55:44

交作业喽:

css:
@charset "UTF-8";
html,body {
        height: 100%;
        color: #FF0088;
        font-family: sans-serif;
}
body {
        background: url("background.jpg") center center;
        background-size: cover;
        margin: 0;
        padding: 0;
        position: relative;
}
#container {
        width: 100%;
        text-align: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
}
h1 {
        font-size: 66px;
        margin-bottom: 22px;
}
p {
        font-size: 33px;
        margin-bottom: 22px;
}
a {
        font-size: 55px;

}
a {
        background: #33ffff;
        color: #fff;
        border: 1px solid #33ffff;
        border-radius: 10px;
        padding: 10px 66px;
        text-decoration: none;
}

html:
<!doctype html>
<html>
        <head>
                <meta charset="utf-8">
                <title>欢迎来到HTML世界</title>
                <link href="index.css" rel="stylesheet">
        </head>
        <body>
                <div id="container">
                        <h1>我爱鱼Ｃ</h1>
                        <p>www.fishc.com-让编程改变世界</p>
                        <a >咻!</a>
                </div>
        </body>
</html>

soulwyb · 发表于 2018-10-11 23:38:35

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        XXX
    </title>
    <meta charset="utf-8">
    <link href="008.css" rel="stylesheet">
</head>

<body>
    <div id="container">
        <h1>我爱鱼C</h1>
        <p>www.FishC.com - 让编程改变世界</p>
        <a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
    </div>
</body>

</html>

CSS文件

@charset 'utf-8';
html {
    height: 100%;
    color: #FF0088;
    /* font-family: sans-serif; */
    font-family: sans-serif;
}

body {
    background: url(background.jpg) center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    /*position: relative;*/
}

#container {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

h1 {
    font-size: 66px;
    margin-bottom: 22px;
}

p {
    font-size: 33px;
    margin-bottom: 22px;
}

a {
    font-size: 55px;
    color: rgb(243, 211, 107);
    border: 1px solid #33ffff;
    border-radius: 10px;
    padding: 10px 66px;
    text-decoration: none;
    background: #33ffff
}

phszhuli · 发表于 2019-3-27 15:36:45

<!DOCTYPE html>
<html>
<head>
        <meta charset="utf-8"> 
        <title>欢迎来到HTML世界</title>
        <link href="0001.css" rel="stylesheet"><!--获取的文件是style样式表-->
</head>
<body>
        <div id="container"><!--div封装，id区块说明-->
<h1>我爱鱼C</h1> 
<p>WWW.FishC.com - 让编程改变世界</p>
<a >传送门</a>
</div>
</body>
</html>

html

/*css文件*/
@charset"UTF-8";
                body{
                        background: url(1.png)center center;/*图片加center center，就能保持一直显示中间位置，如果不加，当页面缩小到小于图片尺寸时，只能出现图片顶部、左侧的内容*/
                        background-size: cover;/*不会产生平铺的效果，只会一张图放大缩小*/
                        margin: 0;
                        padding: 0;/*潜规则，提高自主控制*/
                        position: relative;/*若设置containertop属性，container必须绝对定位，body相对定位*/

                }
                
                html,body{/*为了确保照片自适应屏幕显示，需要给body以及body的父级（html）设置height属性，使之充满全屏。*/
                        height: 100%; /* height如果不设置100%，就会出现重复
                */
                        color: #ffffff;
                        font-family:sans-serif;

                }
                #container{/*定义ID选择器必须添加#号*/
                        width: 100%;
                        text-align: center;/*文字居中*/
                        position: absolute;/*绝对定位*/
                        top: 50%;
                        transform: translateY(-50%);/*使container在Y轴方向上移动50%*/
                }
                h1{
                        font-size: 55px;
                        margin-bottom: 22px;/*控制行间距，h1标题与下面p之间的距离*/
                }
                p{
                        font-size: 22px;
                        margin-bottom:22px;
                }
                a{
                        font-size:33px;
                        background: #66B0A7;
                        color:#fff;
                        /*border: 5px double #ffffff;/*宽度。样式。颜色*/
                        border-radius: 10px;
                        padding: 10px 66px;/*上下两侧10px，左右两侧66px*/
                        text-decoration: none;/*定义无边框*/
                }

CSS

freeulove · 发表于 2019-6-18 14:44:27

感谢你们的付出

苏苏请认真学习 · 发表于 2019-8-31 17:21:53

我去，都这么厉害，我都不会

你在意在便在 · 发表于 2019-10-26 09:18:35

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>让编程改变世界</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
      <div id="container">
<h1>我爱鱼C</h1>
<p>WWW.fishC.com  --  让编程改变世界</p>
<a href="http://bbs.fishc.com/forum-337-1.html">传送门</a>
</div>
</body>
</html>

------------------------------------------css 分割线 ------------------------------------------------------------
@charset "utf-8";

html,body {
color: pink;
height: 100%;
font-family: sans-serif;
}

body {
background-size: cover;
background: url(image/003.jpg) center center;
margin: 0;
padding: 0;
position: relative;
}

#container {
position: absolute;
text-align: center;
width: 100%;
top: 50%;
/* container 这个div移到页面50% 下方，
想要真正实现内容也居中，则需要Y轴偏移-50%即可； */
transform: translateY(-50%);
/* border: 1px solid red; */
}

h1 {
font-size: 66px;
margin-bottom: 22px;
}

p {
font-size: 33px;
margin-bottom: 22px;
}

a {
border:1px solid gray;
border-radius: 10px;  /* 四边圆角 */
/* background:#33ffff;  */
color:white;
font-size: 55px;
margin:10px 33px;
text-decoration:none;
}

酒醉三分醒 · 发表于 2020-4-17 11:24:44

打卡

账号		自动登录	找回密码
密码			立即注册

[庖丁解牛] 0 0 0 8 - CSS样式文件

点评

评分

点评

评分

点评

评分

点评

评分

点评

评分