可以做些什么来改善这个标题？ [英] What could be done to improve this header?

问题描述

我想知道：

*是这个专业品质的标题？

*如果没有，我可以添加或更改什么来实现它？



我知道这远非专业品质而且我是个白痴，但我在编写干净的代码时遇到了麻烦，我不知道哪个是最好像这样做一个标题。我已经尝试使用谷歌搜索帮助，并查看其他网站的代码，但我总是对他们的例子感到困惑。



如果你愿意，我会非常感激我指点一下，谢谢！



HTML：

I would like to know:
* is this header of professional quality?
* if not, what could I add or change to make it so?

I am aware that this is far from professional quality and that I'm an idiot, but I'm having trouble writing clean code and I don't know which way is best to make a header like this. I've tried googling help, and looking at code from other websites, but I'm always perplexed by their examples.

I would greatly appreciate it if you could give me some pointers, thanks!

HTML:

<header id="master-head">
    <div id="master-head-content">

        <span id="master-head-title">Brodie Been</span>

        <span id="master-head-primary">
            <a href="#">My Work</a>
            <a href="#">About Me</a>
        </span>

        <span id="master-head-secondary" class="menu-right">
            <button id="master-head-contact">CONTACT ME</button>
        </span>
    </div>
</header>

SCSS：

SCSS:

$softBlack:#404040;
$primaryColor:#348DC8;

@mixin vertCenter{
    position:absolute;
    top:50%;
    transform:translate(0, -50%);
}

body{
    background:#404040;
    font-family:Open Sans;
    
    button{
        display:inline-block;
        position:relative;
        border:none;
        color:white;
        text-decoration:none;
        font-size:14px;
        background:$primaryColor;
        
        &:hover{
            cursor:pointer;
            color:white;
            background:$softBlack;
        }
    }
}








#master-head{
    position:relative;
    height:100px;
    font-size:14px;
    background:white;
    
    #master-head-content{
        width:100%;
        height:100%;
    
        #master-head-title{
            @include vertCenter;
            padding-left:50px;
            font-size:24px;
        }

        #master-head-primary{
            @include vertCenter;
            padding-left:300px;
            
            a{
                text-decoration:none;
                color:inherit;
                margin-right:30px;
                
                &:hover{
                    margin-bottom:-1px;
                    border-bottom:1px solid black;
                }
            }
        }
        
        #master-head-secondary{
            @include vertCenter;
            right:50px;
            
            #master-head-contact{
                width:130px;
                height:50px;
            }
        }
    }
}

我尝试了什么：



我尝试过没有将元素绝对定位在标题中并将按钮浮动到右边，但它总是导致按钮太低。我应该保持元素绝对定位，还是有其他方法我不知道？



我也无法为我的元素设置适当的ID和类，你知道一种让这段代码更干的方法吗？

What I have tried:

I've tried not absolutely positioning the elements in the header and floating the button to the right, but it always results in the button being too low. Should I just keep the elements absolutely positioned, or is there another method I don't know about?

I am also having trouble setting proper ids and classes for my elements, do you know of a way to make this code more DRY?

推荐答案

softBlack：＃404040;

softBlack:#404040;

primaryColor：＃348DC8;

@ mixin vertCenter {
position ： 绝对;
top ： 50％;
transform ： translate（0，-50％）;
}

body {
background ： ＃404040;
font-family < span class =code-keyword>： Open Sans;

button {
显示 ： inline-block;
position ： relative;
border ： none;
颜色 ： white;
text-decoration ： none;
font-size ： 14px;
背景 ：

primaryColor:#348DC8; @mixin vertCenter{ position:absolute; top:50%; transform:translate(0, -50%); } body{ background:#404040; font-family:Open Sans; button{ display:inline-block; position:relative; border:none; color:white; text-decoration:none; font-size:14px; background:

primaryColor;

& ： 悬停{
游标：指针;
颜色 ： white;
背景 ：

primaryColor; &:hover{ cursor:pointer; color:white; background:

这篇关于可以做些什么来改善这个标题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！