鱼C论坛

 找回密码
 立即注册
查看: 3710|回复: 12

[已解决]新手练习

[复制链接]
发表于 2020-10-25 12:55:42 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 zxcbcv 于 2020-10-25 15:54 编辑

在图书馆里借了本书 里面有个练习题 2.jpg 文字的边框怎么对齐呀? 3.png 如果还有什么问题 请大家指点

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3-34</title>
        <style>

                body{
                        background-color:tomato;
                        text-align: center;
                }
                h1{               
                        color: white;
                       
                }

                #M{
                        color: black;
                }
                p{
                        padding:10px;                                /*文本外边距*/
                        word-spacing:20px;        /*字间距*/
                       
                       
                }
                .a1{
                        padding: 10px;
                                               
                }
                span{
                       
                        padding: 10px;
                        background-color: white;
                }

        </style>
</head>
<body>
        <h1><span id="M">M</span>iaov.com</h1>
        <p><span class="a1" style="background-color: blue;" >新鲜水果</span><span>苹果 梨 橙子 奇异果 火龙果 草莓 榴莲</span></p>
        <p><span class="a1" style="background-color: aqua;">蔬菜蛋品</span><span>蛋品 叶菜类 根菜类 葱姜蒜椒 鲜菌菇 茄瓜果类</span></p>
        <p><span class="a1" style="background-color: blueviolet;">精选肉类</span><span>猪肉 牛肉 羊肉 鸡肉 鸭肉 冷鲜肉 特色肉类</span></p>
        <p><span class="a1" style="background-color: brown;">海鲜水产</span><span>鱼类 虾类 蟹类 贝类 海参 活鲜 特色水产</span></p>
        <p><span class="a1" style="background-color: chocolate;">冷冻速饮</span><span>水饺/混沌 汤圆/元宵 面点/面食 冰淇淋 速冻半成品</span></p>
        <p><span class="a1" style="background-color: cornflowerblue;">中外名酒</span><span>白酒 葡萄酒 洋酒 啤酒 黄酒/养生酒 收藏酒/陈年老酒</span></p>
        <p><span class="a1" style="background-color: darkgreen;">进口食品</span><span>牛奶 饼干/蛋糕 糖果/巧克力 休闲零食 冲调饮品 调味</span></p>
</body>
</html>
最佳答案
2020-10-25 16:06:49
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-34</title>
    <style>
        body{background-color:tomato;padding:0;margin:0;box-sizing:border-box}
        h1{color:white}
        #M{color:black}
        header, section{width:80vw;margin:auto}
        header{text-align:center}
        p{padding:10px;word-spacing:20px}
        span{display:inline-block;background-color:white;text-align:center;padding:10px 0}
        p>span:nth-child(1){width:20%}
        p>span:nth-child(2){width:80%}

        </style>
</head>
<body>
    <header>
        <h1><span id="M">M</span>iaov.com</h1>
    </header>
    <section>
        <p><span class="a1" style="background-color: blue;" >新鲜水果</span><span>苹果 梨 橙子 奇异果 火龙果 草莓 榴莲</span></p>
        <p><span class="a1" style="background-color: aqua;">蔬菜蛋品</span><span>蛋品 叶菜类 根菜类 葱姜蒜椒 鲜菌菇 茄瓜果类</span></p>
        <p><span class="a1" style="background-color: blueviolet;">精选肉类</span><span>猪肉 牛肉 羊肉 鸡肉 鸭肉 冷鲜肉 特色肉类</span></p>
        <p><span class="a1" style="background-color: brown;">海鲜水产</span><span>鱼类 虾类 蟹类 贝类 海参 活鲜 特色水产</span></p>
        <p><span class="a1" style="background-color: chocolate;">冷冻速饮</span><span>水饺/混沌 汤圆/元宵 面点/面食 冰淇淋 速冻半成品</span></p>
        <p><span class="a1" style="background-color: cornflowerblue;">中外名酒</span><span>白酒 葡萄酒 洋酒 啤酒 黄酒/养生酒 收藏酒/陈年老酒</span></p>
        <p><span class="a1" style="background-color: darkgreen;">进口食品</span><span>牛奶 饼干/蛋糕 糖果/巧克力 休闲零食 冲调饮品 调味</span></p>
    </section>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-10-25 15:08:57 | 显示全部楼层
有一种办法是使用空格填充,目前还没想出别的办法
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-25 15:47:26 | 显示全部楼层

回帖奖励 +2 鱼币

问题?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

 楼主| 发表于 2020-10-25 15:56:58 | 显示全部楼层


我问题更新了 我想问下 这几行文本怎么左右对齐
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-25 15:57:33 | 显示全部楼层

回帖奖励 +2 鱼币

给他们一个共同的父元素,用position定位,或者用text-indent
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-25 16:06:49 | 显示全部楼层    本楼为最佳答案   

回帖奖励 +2 鱼币

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3-34</title>
    <style>
        body{background-color:tomato;padding:0;margin:0;box-sizing:border-box}
        h1{color:white}
        #M{color:black}
        header, section{width:80vw;margin:auto}
        header{text-align:center}
        p{padding:10px;word-spacing:20px}
        span{display:inline-block;background-color:white;text-align:center;padding:10px 0}
        p>span:nth-child(1){width:20%}
        p>span:nth-child(2){width:80%}

        </style>
</head>
<body>
    <header>
        <h1><span id="M">M</span>iaov.com</h1>
    </header>
    <section>
        <p><span class="a1" style="background-color: blue;" >新鲜水果</span><span>苹果 梨 橙子 奇异果 火龙果 草莓 榴莲</span></p>
        <p><span class="a1" style="background-color: aqua;">蔬菜蛋品</span><span>蛋品 叶菜类 根菜类 葱姜蒜椒 鲜菌菇 茄瓜果类</span></p>
        <p><span class="a1" style="background-color: blueviolet;">精选肉类</span><span>猪肉 牛肉 羊肉 鸡肉 鸭肉 冷鲜肉 特色肉类</span></p>
        <p><span class="a1" style="background-color: brown;">海鲜水产</span><span>鱼类 虾类 蟹类 贝类 海参 活鲜 特色水产</span></p>
        <p><span class="a1" style="background-color: chocolate;">冷冻速饮</span><span>水饺/混沌 汤圆/元宵 面点/面食 冰淇淋 速冻半成品</span></p>
        <p><span class="a1" style="background-color: cornflowerblue;">中外名酒</span><span>白酒 葡萄酒 洋酒 啤酒 黄酒/养生酒 收藏酒/陈年老酒</span></p>
        <p><span class="a1" style="background-color: darkgreen;">进口食品</span><span>牛奶 饼干/蛋糕 糖果/巧克力 休闲零食 冲调饮品 调味</span></p>
    </section>
</body>
</html>
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 1 反对 0

使用道具 举报

发表于 2020-10-25 16:09:09 | 显示全部楼层
好多年没写css了  
开头一个box-sizing:border-box是必须的 这样不费脑子一些
然后就是span这种行标签 不要给左右的padding 只给上下的才行
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-25 16:17:45 | 显示全部楼层

回帖奖励 +2 鱼币

加油
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-10-25 16:27:16 | 显示全部楼层

回帖奖励 +2 鱼币

学习!厉害!!!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-26 14:43:53 | 显示全部楼层

回帖奖励 +2 鱼币


这个代码有点好看啊
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-26 20:13:12 | 显示全部楼层
厉害!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-10-28 23:44:53 | 显示全部楼层
学习先
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-10-30 21:59:17 | 显示全部楼层
??
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-12-23 23:09

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表